raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-01-24 20:36:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make shops index page usable on mobile

Browse Source
This commit is contained in:
Matt-Yorkley
2020-10-06 11:22:58 +01:00
parent 76def3a74f
commit 469e4a4c87
3 changed files with 28 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
app/assets/stylesheets/darkswarm/hub_node.scss
View File

@@ -16,6 +16,22 @@
.active_table_row {
line-height: 1rem;
@include breakpoint(phablet) {
display: inline-block;
width: 100%;
background-color: rgba($white, 0.75);
&:not(.open) {
.columns:last-child {
padding-left: 0;
}
}
a.hub {
display: inline-block;
}
}
}
//Generic text link style
@@ -44,13 +60,6 @@
}
}
//Hub Link
@include breakpoint(phablet) {
a.hub {
display: block;
}
}
//Hub Name
span.hub-name-listing {
font-weight: 700;
@@ -67,11 +76,11 @@
.active_table_row {
border: 1px solid transparent;
@include breakpoint(phablet) {
border-color: $clr-brick-light;
&:hover, &:active, &:focus {
border-color: $clr-brick-light-bright;
}
&:hover, &:active, &:focus {
@include breakpoint(phablet) {
border-color: $clr-brick-light-bright;
}
}
@@ -165,8 +174,9 @@
}
@include breakpoint(phablet) {
.active_table_row:first-child .skinny-head {
background-color: rgba(255, 255, 255, 0.85);
.active_table_row:first-child,
.active_table_row:last-child, {
background-color: rgba($white, 0.75);
}
}
}

2
app/views/shops/_fat.html.haml
View File

@@ -1,6 +1,6 @@
.row.active_table_row{"ng-show" => "open()", "ng-click" => "toggle($event)", "ng-class" => "{'open' : open()}"}
.columns.small-12.fat.text-center{"ng-show" => "open() && shopfront_loading"}
%p
%p.fullwidth
%img.spinner.text-center{ src: image_path("spinning-circles.svg") }
.columns.small-12.medium-6.large-5.fat{"ng-show" => "open() && !shopfront_loading"}

10
app/views/shops/_skinny.html.haml
View File

@@ -10,23 +10,23 @@
%span.margin-top{"ng-bind" => "::hub.address.state_name"}
%span.margin-top{"ng-if" => "hub.distance != null && hub.distance > 0"} ({{ hub.distance / 1000 | number:0 }} km)
.columns.small-4.medium-3.large-3.text-right{"ng-if" => "::hub.active"}
.columns.small-5.medium-3.large-3.text-right{"ng-if" => "::hub.active"}
%a.hub.open_closed{"ng-href" => "{{::hub.path}}", "ng-attr-target" => "{{ embedded_layout ? '_blank' : undefined}}", "ng-class" => "{primary: hub.active, secondary: !hub.active}", "ofn-change-hub" => "hub"}
%i.ofn-i_068-shop-reversed
%i.ofn-i_068-shop-reversed.show-for-medium-up
%span.margin-top{ ng: { if: "::current()" } }
%em= t :hubs_shopping_here
%span.margin-top{ ng: { if: "::!current()" } }
%span{"ng-bind" => "::hub.orders_close_at | sensible_timeframe"}
.columns.small-4.medium-3.large-3.text-right{"ng-if" => "::!hub.active"}
.columns.small-5.medium-3.large-3.text-right{"ng-if" => "::!hub.active"}
%a.hub.open_closed{"ng-href" => "{{::hub.path}}", "ng-attr-target" => "{{ embedded_layout ? '_blank' : undefined}}", "ng-class" => "{primary: hub.active, secondary: !hub.active}", "ofn-change-hub" => "hub"}
%span.margin-top{ ng: { if: "::current()" } }
%em= t :hubs_shopping_here
%span.margin-top{ ng: { if: "::!current()" } }
= t :hubs_orders_closed
%i.ofn-i_068-shop-reversed
%i.ofn-i_068-shop-reversed.show-for-medium-up
.columns.small-2.medium-1.large-1.text-right
.columns.small-1.medium-1.large-1.text-right
%span.margin-top
%i{"ng-class" => "{'ofn-i_005-caret-down' : !open(), 'ofn-i_006-caret-up' : open()}"}