mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 01:20:24 +03:00
Code Issues Projects Releases Packages Wiki Activity

Finished design on tags list page

Browse source
This commit is contained in:
Alejandro Celaya 2018-08-18 11:15:00 +02:00
parent 63ddef2d81
commit f1ee467af4
2 changed files with 46 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
src/tags/TagsList.js
View file

@ -2,10 +2,13 @@ import React from 'react';
import { connect } from 'react-redux';
import { pick, splitEvery } from 'ramda';
import { listTags } from './reducers/tagsList';
import './TagsList.scss';
import { Card } from 'reactstrap';
import { Card, CardBody } from 'reactstrap';
import ColorGenerator from '../utils/ColorGenerator';
import MuttedMessage from '../utils/MuttedMessage';
import editIcon from '@fortawesome/fontawesome-free-solid/faPencilAlt';
import deleteIcon from '@fortawesome/fontawesome-free-solid/faTrash';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import './TagsList.scss';
const { round } = Math;
@ -36,15 +39,23 @@ export class TagsList extends React.Component {
{tagsGroups.map((group, index) => (
<div key={index} className="col-md-6 col-xl-3">
{group.map(tag => (
<Card className="tags-list__tag-card" key={tag}>
<CardBody className="tags-list__tag-card-body">
<button className="btn btn-light btn-sm tags-list__btn">
<FontAwesomeIcon icon={deleteIcon} />
</button>
<button className="btn btn-light btn-sm tags-list__btn">
<FontAwesomeIcon icon={editIcon} />
</button>
<h5 className="tags-list__tag-title">
<div
style={{ backgroundColor: colorGenerator.getColorForKey(tag) }}
className="tags-list__tag-container"
key={tag}
>
<Card body className="tags-list__tag-card">
<h5 className="tags-list__tag-title">{tag}</h5>
className="tags-list__tag-bullet"
/>
{tag}
</h5>
</CardBody>
</Card>
</div>
))}
</div>
))}

33
src/tags/TagsList.scss
View file

@ -1,18 +1,33 @@
.tags-list__tag-container {
border-radius: .26rem;
}
.tags-list__tag-card.tags-list__tag-card {
padding: .75rem 2.5rem 0.75rem 1rem;
background-color: #eeeeee;
margin-bottom: .5rem;
transition: background-color 200ms, color 200ms;
}
.tags-list__tag-card.tags-list__tag-card:hover {
background-color: transparent;
color: #fff;
.tags-list__tag-card-body.tags-list__tag-card-body {
padding: .75rem;
}
.tags-list__tag-title {
margin: 0;
line-height: 31px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
padding-right: 5px;
}
.tags-list__tag-bullet {
$width: 20px;
border-radius: 50%;
width: $width;
height: $width;
display: inline-block;
vertical-align: -4px;
margin-right: 7px;
}
.tags-list__btn {
float: right;
}
.tags-list__btn:not(:last-child) {
margin-left: 2px;
}