Skip to content
This repository has been archived by the owner on Jun 3, 2024. It is now read-only.

Simplify POI panel CSS #335

Merged
merged 6 commits into from
Aug 14, 2019
Merged

Simplify POI panel CSS #335

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d81bfe3
Use flex for POI panel header layout
bbecquet Aug 13, 2019
077d932
Simplify POI actions layout CSS
bbecquet Aug 13, 2019
a5239ef
Fix POI category list title margin
bbecquet Aug 13, 2019
ec7a146
Simplify category list markup
bbecquet Aug 13, 2019
1ab8b93
Simplify POI action buttons
bbecquet Aug 14, 2019
23d6e8c
Fix POI panel blocks margins
bbecquet Aug 14, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/panel/poi_panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import PoiBlocContainer from './poi_bloc/poi_bloc_container';
import SearchInput from '../ui_components/search_input';
import Telemetry from '../libs/telemetry';
import headerPartial from '../views/poi_partial/header.dot';
import titleImagePartial from '../views/poi_partial/title_image.dot';
import MinimalHourPanel from './poi_bloc/opening_minimal';
import layouts from './layouts.js';
import nconf from '@qwant/nconf-getter';
Expand All @@ -27,6 +28,7 @@ function PoiPanel(sharePanel) {
this.lang = window.getBaseLang().code;
this.card = true;
this.headerPartial = headerPartial;
this.titleImagePartial = titleImagePartial;
this.minimalHourPanel = new MinimalHourPanel();
this.isDirectionActive = nconf.get().direction.enabled;
this.categories = CategoryService.getCategories();
Expand Down
161 changes: 41 additions & 120 deletions src/scss/includes/panels/poi_panel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@

$BLOCK_INDENT: 28px;
$CARD_ACTION_WIDTH: 112px;
$CARD_ACTION_RIGHT_MARGIN: 8px;
$CARD_PADDING: 8px;
$BLOCK_PADDING: 24px;
$BLOCK_ICON_FONT_SIZE: 16px;
Expand Down Expand Up @@ -30,10 +29,8 @@ $HEADER_SIZE: 40px;
background-size: cover;
background-position: center center;
background-color: white;
position: absolute;
top: 0px;
right: 0;
}

.poi_panel--hidden {
display: none;
}
Expand All @@ -48,16 +45,6 @@ $HEADER_SIZE: 40px;
position: relative;
}

.poi_panel__content__card__content {
float: left;
width: calc(100vw - (2 * #{$CARD_PADDING} + #{$CARD_ACTION_WIDTH} + #{$CARD_ACTION_RIGHT_MARGIN}));
}

.poi_panel__content__card__action__container {
margin-top: 42px;
float: right;
}

.poi_panel__content__card__action {
display: block;
width: $CARD_ACTION_WIDTH;
Expand All @@ -68,18 +55,14 @@ $HEADER_SIZE: 40px;
font-weight: 600;
color: $primary_text;
border-radius: 18px;
margin: 0 $CARD_ACTION_RIGHT_MARGIN 8px 0;
margin: 8px 0;
cursor: pointer;
text-align: center;
/* secure long translation */
white-space: nowrap;
overflow: hidden;
}

.poi_panel__content__card__action__direction {
margin: 0 $CARD_ACTION_RIGHT_MARGIN 8px 0;
}

.poi_panel__close {
position: absolute;
right: 11px;
Expand Down Expand Up @@ -134,17 +117,10 @@ $HEADER_SIZE: 40px;
}

.poi_panel__description_container {
position: relative;
padding: 0 120px 0 0;
margin-bottom: 25px;
cursor: pointer;
min-height: 50px;
}

.poi_panel__description_container:after {
display: block;
clear: both;
content: '';
display: flex;
justify-content: space-between;
}

/* wrap it into an element and then put padding on this new element instead */
Expand Down Expand Up @@ -313,75 +289,37 @@ $HEADER_SIZE: 40px;
}

.poi_panel__actions {
width: 100%;
position: relative;
margin-bottom: 10px;
overflow: auto;
display: flex;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Without this margin-bottom, the "osm_contribute" div is packed below the buttons (when no other block is present)
image

Maybe add a margin-top on .osm_contribute ?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, I was a bit too quick to remove rules. I re-introduced a margin-bottom, as it's easier to manage only bottom margins when stacking components. It looks better indeed :)
Capture d’écran de 2019-08-14 17-52-58

margin-bottom: 12px;
}

.button_container {
float: left;
text-decoration: none;
.poi_panel__action {
font-size: 22px;
color: $secondary_text;
cursor: pointer;
height: auto;
text-align: center;
min-width: 45px;

&:not(:last-child){
margin-right: 15px;
max-width: calc(23% - 20px);
}

&.poi_panel__actions__phone_container {
max-width: 28%;
}

&:not(:first-child){
min-width: 20%
div {
margin: 9px 0;
font-family: Asap;
font-size: 12px;
}


&:hover {
color: $primary_text;
text-decoration: none;
}

button {
width: 100%;
display: block;
cursor: pointer;
&:not(:last-child){
margin-right: 15px;
}
}

.button_container:hover {
button, div {
color: $primary_text;
&:not(:first-child){
min-width: 20%
}
}

.button_container:hover {
cursor: pointer;
}

.poi_panel__actions__icon {
display: inline-block;
height: 25px;
font-size: 22px;
color: $secondary_text;
vertical-align: middle;
}

.poi_panel__actions__text {
display: flex;
justify-content: center;
height: 25px;
font-size: 12px;
color: $secondary_text;
margin: 7px 0 0;
}

.poi_panel__actions__text:hover {
color: $primary_text;
}


.poi_panel__store_status__toggle:after {
content: '';
}
Expand Down Expand Up @@ -468,12 +406,6 @@ $HEADER_SIZE: 40px;
.poi_panel__title__symbol {
font-size: 45px;
color: #E93865;

.poi_panel & {
position: absolute;
right: 0px;
top: 5px;
}
}

/* symbols */
Expand Down Expand Up @@ -583,14 +515,14 @@ $HEADER_SIZE: 40px;
}

.service_panel__categories--poi {
margin: 15px 0;
margin-bottom: 12px;
border-top: 1px solid rgba(0,0,0,.16);

.service_panel__categories_title {
font-weight: normal;
font-size: 16px;
color: #495063;
margin: 20px 0 15px 12px;
margin: 15px 0;

.icon-icon_compass {
color: #c8cbd3;
Expand Down Expand Up @@ -667,6 +599,22 @@ $HEADER_SIZE: 40px;
}
}

.poi_panel__content__card .poi_panel__description_container {
flex-grow: 1;
margin: 0;
flex-direction: row-reverse;
justify-content: flex-end;

.poi_panel__image {
display: none;
}

.poi_panel__title__symbol {
display: block;
margin: -9px 3px 0 0;
}
}

@media (max-width: 640px) {
.poi_panel {
width: 100vw;
Expand Down Expand Up @@ -727,23 +675,17 @@ $HEADER_SIZE: 40px;
min-height: 125px;
}

.poi_panel__content__card {
display: none;
}

.poi_panel--card .poi_panel__content {
display: none;
}

.poi_panel--card .poi_panel__content__card {
display: block;
display: flex;
justify-content: space-between;
padding: 20px $CARD_PADDING $CARD_PADDING;
}

.poi_panel--card {
.poi_panel__title {
width: auto;
padding-top: 20px;
}
.poi_panel__address {
font-size: 14px;
padding: 8px 10px 0 0;
Expand Down Expand Up @@ -782,12 +724,6 @@ $HEADER_SIZE: 40px;
margin-top: 17px;
}

.poi_panel__content__card__content .poi_panel__title__symbol.icon {
margin: 6px 0 0 7px;
right: initial;
padding-left: 0;
}

.poi_panel__info__section:not(:last-of-type):after {
width: calc(100% - 40px);
}
Expand All @@ -796,21 +732,6 @@ $HEADER_SIZE: 40px;
width: 100%;
}

.poi_panel__content__card__content > .poi_panel__address, .poi_panel__content__card__content > * {
padding-left: 55px;
}

.poi_panel__content__card__content .poi_panel__image {
display: none;
}
.poi_panel__image + .poi_panel__title__symbol {
display: block;
}

.poi_panel__content__card__action__container {
margin-top: 26px;
}

.poi_panel__content__card__action__direction {
background-color: $primary_text;
border-color: $primary_text;
Expand Down
Loading