analytics/assets/js/dashboard/stats/more-link.js
Ru Singh c95d375839
Fix for details button misbehaving on mobile (#1114)
* chore(make): convenience commands for installation & dev server

* docs: easier development env instructions

* docs: add note about docker volumes

* docs: detail pre-commit configuration

* style: eslint and prettier changes

* Allow for passing custom classes to fade-in

* style: eslint & prettier for the details button component

* style: react lifecycle methods to come first

* docs: add instructions to disable pre-commit

* style: devices components

* Move render methods to the last (together) in the order list
* Remove unused component import
* React lifecycle to come first before our own methods
* General styling and eslint changes
* Cleaner renderContent method using switch/case (fixes an eslint error as well!)
* Cleaner renderPill method with proper spacing + removing uncessary else

* style: more eslint/prettier for pages components

* Use newer Fragment syntax
* Remove unnecessary else statement
* Use backtick strings for concatenating strings
* Remove unnecessary space
* Remove unused imports and variable declarations
* Bunch render methods together as last in the order list

* fix: details button to drop to the bottom naturally on smaller screens

This _mostly_ fixes one of the issues being tracked on #972, titled "Details button issue on Firefox specifically"

* refactor: reduce usage of our CSS class in favor of tailwind's util classes

* refactor: remove our css classes in favor of Tailwind's util classes
2021-06-15 10:34:43 +03:00

34 lines
1.2 KiB
JavaScript

import React from 'react';
import { Link } from 'react-router-dom'
export default function MoreLink({site, list, endpoint}) {
if (list.length > 0) {
return (
<div className="text-center w-full py-3 md:pb-3 md:pt-0 md:absolute md:bottom-0 md:left-0">
<Link
to={`/${encodeURIComponent(site.domain)}/${endpoint}${window.location.search}`}
// eslint-disable-next-line max-len
className="leading-snug font-bold text-sm text-gray-500 dark:text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition tracking-wide"
>
<svg
className="feather mr-1"
style={{marginTop: '-2px'}}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
{/* eslint-disable-next-line max-len */}
<path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" />
</svg>
DETAILS
</Link>
</div>
)
}
return null
}