1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-07-24 23:59:47 +02:00

Improve display on vertically constrained screens

Changed media queries to invoke mobile-first rendering if screen vertical height is less than 650px.
This commit is contained in:
Harvey Kandola 2019-01-13 13:57:12 +00:00
parent 317e9cbcaa
commit d05052a5b4
3 changed files with 778 additions and 778 deletions

View file

@ -71,8 +71,8 @@ func (s Store) PublicSpaces(ctx domain.RequestContext, orgID string) (sp []space
qry := s.Bind(`SELECT id, c_refid AS refid, qry := s.Bind(`SELECT id, c_refid AS refid,
c_name AS name, c_orgid AS orgid, c_userid AS userid, c_name AS name, c_orgid AS orgid, c_userid AS userid,
c_type AS type, c_lifecycle AS lifecycle, c_likes AS likes, c_type AS type, c_lifecycle AS lifecycle, c_likes AS likes,
c_icon AS icon, c_labelid AS labelid, c_desc AS desc, c_icon AS icon, c_labelid AS labelid, c_desc AS description,
c_count_category as countcategory, c_count_content AS countcontent, c_count_category AS countcategory, c_count_content AS countcontent,
c_created AS created, c_revised AS revised c_created AS created, c_revised AS revised
FROM dmz_space FROM dmz_space
WHERE c_orgid=? AND c_type=1`) WHERE c_orgid=? AND c_type=1`)

File diff suppressed because one or more lines are too long

View file

@ -36,8 +36,8 @@
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
width: 100%; width: 100%;
overflow-x: hidden; // overflow-x: hidden;
overflow-y: auto; // overflow-y: auto;
> .nav-options { > .nav-options {
> .selected { > .selected {
@ -130,7 +130,7 @@
} }
// Tablet starts around 700px // Tablet starts around 700px
@media (min-width: $display-break-1) { @media (min-width: $display-break-1) and (min-height: 650px) {
.master-container { .master-container {
display: grid; display: grid;
grid-template-columns: 240px auto; grid-template-columns: 240px auto;
@ -230,7 +230,7 @@
} }
// Small screen starts around 900px // Small screen starts around 900px
@media (min-width: $display-break-2) { @media (min-width: $display-break-2) and (min-height: 650px) {
.master-container { .master-container {
display: grid; display: grid;
grid-template-columns: 290px auto; grid-template-columns: 290px auto;
@ -315,7 +315,7 @@
} }
// Medium screen starts around 1200px // Medium screen starts around 1200px
@media (min-width: $display-break-3) { @media (min-width: $display-break-3) and (min-height: 650px) {
.master-container { .master-container {
display: grid; display: grid;
grid-template-columns: 320px auto; grid-template-columns: 320px auto;
@ -352,7 +352,7 @@
} }
// Large screen starts around 1600px // Large screen starts around 1600px
@media (min-width: $display-break-4) { @media (min-width: $display-break-4) and (min-height: 650px) {
.master-container { .master-container {
display: grid; display: grid;
grid-template-columns: 370px minmax(auto, 1200px); grid-template-columns: 370px minmax(auto, 1200px);