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,
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_icon AS icon, c_labelid AS labelid, c_desc AS desc,
c_count_category as countcategory, c_count_content AS countcontent,
c_icon AS icon, c_labelid AS labelid, c_desc AS description,
c_count_category AS countcategory, c_count_content AS countcontent,
c_created AS created, c_revised AS revised
FROM dmz_space
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;
flex-wrap: wrap;
width: 100%;
overflow-x: hidden;
overflow-y: auto;
// overflow-x: hidden;
// overflow-y: auto;
> .nav-options {
> .selected {
@ -130,7 +130,7 @@
}
// Tablet starts around 700px
@media (min-width: $display-break-1) {
@media (min-width: $display-break-1) and (min-height: 650px) {
.master-container {
display: grid;
grid-template-columns: 240px auto;
@ -230,7 +230,7 @@
}
// Small screen starts around 900px
@media (min-width: $display-break-2) {
@media (min-width: $display-break-2) and (min-height: 650px) {
.master-container {
display: grid;
grid-template-columns: 290px auto;
@ -315,7 +315,7 @@
}
// Medium screen starts around 1200px
@media (min-width: $display-break-3) {
@media (min-width: $display-break-3) and (min-height: 650px) {
.master-container {
display: grid;
grid-template-columns: 320px auto;
@ -352,7 +352,7 @@
}
// Large screen starts around 1600px
@media (min-width: $display-break-4) {
@media (min-width: $display-break-4) and (min-height: 650px) {
.master-container {
display: grid;
grid-template-columns: 370px minmax(auto, 1200px);