a_adli/colouring-montreal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Restyle sidebar

Browse Source
This commit is contained in:
Maciej Ziarkowski 2019-09-04 17:08:53 +01:00
parent 6422be118d
commit ef218009d6
3 changed files with 26 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
app/src/frontend/building/categories.css
View File

@ -9,10 +9,11 @@
text-align: center; text-align: center;
} }
.data-category-list li { .data-category-list li {
position: relative;
display: inline-block; display: inline-block;
vertical-align: bottom; vertical-align: bottom;
width: 11rem; width: 10rem;
height: 11rem; height: 10rem;
margin: 0.375rem; margin: 0.375rem;
box-shadow: 0 0 2px 5px #ffffff; box-shadow: 0 0 2px 5px #ffffff;
transition: box-shadow 0.2s; transition: box-shadow 0.2s;
@ -28,7 +29,7 @@
display: block; display: block;
padding: 0.1em; padding: 0.1em;
width: 100%; width: 100%;
height: 7rem; height: 100%;
} }
.data-category-list .category-link:hover, .data-category-list .category-link:hover,
.data-category-list .category-link:active, .data-category-list .category-link:active,
@ -36,18 +37,24 @@
color: #222; color: #222;
} }
.data-category-list .help { .data-category-list .help {
height: 4rem; position: absolute;
padding: 1.5em 0; bottom: 0.75rem;
width: 100%; right: 0.75rem;
background-color: rgba(255,255,255,0.2); color: #222;
transition: background-color 0.2s;
} }
.data-category-list .help:hover, .data-category-list .help:hover,
.data-category-list .help:active, .data-category-list .help:active,
.data-category-list .help:focus { .data-category-list .help:focus {
color: #222; color: #000;
background-color: rgba(255,255,255,0.3); background-color: rgba(37, 10, 10, 0.3);
} }
.data-category-list .help::before {
content: "\f05a";
font-family: FontAwesome;
margin-right: 0.25rem;
}
.data-category-list .category { .data-category-list .category {
text-align: center; text-align: center;
font-size: 1.5em; font-size: 1.5em;

2
app/src/frontend/building/categories.tsx
View File

@ -138,7 +138,7 @@ const Category = (props) => (
<p className="description">{props.desc}</p> <p className="description">{props.desc}</p>
</NavLink> </NavLink>
<a className="icon-button help" href={props.help}> <a className="icon-button help" href={props.help}>
More info More
</a> </a>
</li> </li>
) )

42
app/src/frontend/building/sidebar.css
View File

@ -2,51 +2,25 @@
* Sidebar layout * Sidebar layout
*/ */
.info-container { .info-container {
position: absolute; order: 1;
top: 50%;
left: 0;
right: 0;
bottom: 3rem;
padding: 0 0 2em; padding: 0 0 2em;
background: #fff; background: #fff;
z-index: 1000; overflow-y: scroll;
overflow-y: auto; height: 40%;
} }
.info-container h2:first-child { .info-container h2:first-child {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
margin-top: 0.5rem; margin-top: 0.5rem;
margin-left: -0.1em; margin-left: -0.1em;
padding: 0 0.75rem; padding: 0 0.75rem;
} }
#root .leaflet-container .leaflet-control-attribution {
width: 100%;
height: 3rem;
background: #fff;
background: rgba(255, 255, 255, 0.7);
}
.leaflet-right{
left: 0;
}
@media (min-width: 380px){
.info-container {
bottom: 2rem;
}
#root .leaflet-container .leaflet-control-attribution {
height: 2rem;
}
}
@media (min-width: 768px){ @media (min-width: 768px){
.info-container { .info-container {
top: 0; order: 0;
left: 0; height: unset;
width: 25rem; width: 23rem;
bottom: 0;
}
.leaflet-right{
left: 25rem;
}
#root .leaflet-container .leaflet-control-attribution {
height: auto;
} }
} }