plausible/analytics
1
1
Fork 0
mirror of https://github.com/plausible/analytics.git synced 2024-11-23 11:12:15 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fixes custom prop tab wrapping & spacing on smaller viewports (#1383)

Browse Source 
* Fixes custom prop tab wrapping & spacing on smaller viewports

* Changelog

Co-authored-by: Uku Taht <Uku.taht@gmail.com>
This commit is contained in:
Vignesh Joglekar 2021-10-13 03:39:44 -05:00 committed by GitHub
parent f56992532f
commit 688e195e27
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -30,6 +30,7 @@ All notable changes to this project will be documented in this file.
- Details modals are now responsive and take up less horizontal space on smaller screens to make it easier to scroll.
- Fix reading config from file
- Fix some links not opening correctly in new tab
- UI fix for more than one row of custom event properties plausible/analytics#1383
- UI fix for user menu and time picker overlapping plausible/analytics#1352
### Removed

12
assets/js/dashboard/stats/conversions/prop-breakdown.js
View File

@ -146,18 +146,18 @@ export default class PropertyBreakdown extends React.Component {
const isActive = this.state.propKey === key
if (isActive) {
return <li key={key} className="inline-block h-5 text-indigo-700 dark:text-indigo-500 font-bold border-b-2 border-indigo-700 dark:border-indigo-500 ">{key}</li>
return <li key={key} className="inline-block h-5 text-indigo-700 dark:text-indigo-500 font-bold border-b-2 border-indigo-700 dark:border-indigo-500 mr-2">{key}</li>
} else {
return <li key={key} className="hover:text-indigo-600 cursor-pointer" onClick={this.changePropKey.bind(this, key)}>{key}</li>
return <li key={key} className="hover:text-indigo-600 cursor-pointer mr-2" onClick={this.changePropKey.bind(this, key)}>{key}</li>
}
}
render() {
return (
<div className="w-full pl-6 mt-4">
<div className="flex items-center pb-1">
<span className="text-xs font-bold text-gray-600 dark:text-gray-300">Breakdown by:</span>
<ul className="flex font-medium text-xs text-gray-500 dark:text-gray-400 space-x-2 leading-5 pl-1">
<div className="w-full pl-3 sm:pl-6 mt-4">
<div className="flex-col sm:flex-row flex items-center pb-1">
<span className="text-xs font-bold text-gray-600 dark:text-gray-300 self-start sm:self-auto mb-1 sm:mb-0">Breakdown by:</span>
<ul className="flex flex-wrap font-medium text-xs text-gray-500 dark:text-gray-400 leading-5 pl-1 sm:pl-2">
{ this.props.goal.prop_names.map(this.renderPill.bind(this)) }
</ul>
</div>