From b5bc05f94fa41255ac54a594f1759b357f778199 Mon Sep 17 00:00:00 2001 From: roberto Date: Sat, 15 Oct 2016 12:17:11 +0200 Subject: [PATCH 1/2] first approach to responsive design --- views/projectSettings.mustache | 3 + views/user.mustache | 340 +++++++++++++++++++++++---------- 2 files changed, 240 insertions(+), 103 deletions(-) diff --git a/views/projectSettings.mustache b/views/projectSettings.mustache index 384818e..4669aa5 100644 --- a/views/projectSettings.mustache +++ b/views/projectSettings.mustache @@ -27,6 +27,9 @@ tr.selected{ background-color:#444; } + td { + word-break: break-word; + } #MRIFiles, #annotations, #access { color:white; text-align:left; diff --git a/views/user.mustache b/views/user.mustache index b6c4553..ad7071f 100644 --- a/views/user.mustache +++ b/views/user.mustache @@ -19,6 +19,9 @@ .tab.selected { background:#333; } + td { + word-break: break-word; + } #MRIFiles, #atlasFiles, #projects { color:white; text-align:left; @@ -36,6 +39,132 @@ #MRIFiles a, #atlasFiles a, #projects a { text-decoration:none; } + + /*************************** resizable layout **************************/ + #centeringDiv { + position:relative; + display:block; + margin:0 auto; + } + #userImage { + position:relative; + display: inline-block; + background:#333; + width:200px; + height:200px; + vertical-align: top; + } + #userDescription { + position: relative; + display: inline-block; + vertical-align: top; + } + #userDescription p { + margin: 0; + } + #userTable { + position: relative; + display:inline-block; + min-height:400px; + max-width: 900px; + text-decoration:none; + vertical-align: top; + margin-top: 20px; + } + + /* for larger screen (computer, big iPad, small iPad landscape) */ + @media all and (min-width: 1023px) { + #centeringDiv { + width:984px; + padding:20px; + } + #userImage { + float: left; + } + #userDescription { + float: left; + clear: both; + width: 200px; + } + #userTable { + max-width: 900px; + width: calc(100% - 300px); + margin-left: 20px; + margin-top: 0px; + } + } + + /* for smaller screen (small iPad portrait) */ + @media not all and (min-width: 1023px) { + #centeringDiv { + width:700px; + padding:20px; + } + #userDescription { + position: relative; + top: 0px; + left: 0px; + padding-left:20px; + padding-right: 20px; + width:calc(100% - 250px); + text-align: justify; + } + #userTable { + position: relative; + max-width: 700px; + width:calc(100% - 40px); + top: 0px; + left: 0px; + } + } + + /* for even smaller screen (phone) */ + @media not all and (min-width: 739px) { + #centeringDiv { + text-align: center; + width:600px; + padding:10px; + } + #userDescription { + position: relative; + top: 0px; + left: 0px; + padding-left:10px; + width:calc(100% - 20px); + text-align: justify; + } + #userTable { + position: relative; + max-width: 600px; + width:calc(100% - 40px); + top: 0px; + left: 0px; + } + } + + /* for even still smaller screen (phone) */ + @media not all and (min-width: 639px) { + #centeringDiv { + text-align: center; + width:480px; + padding:10px; + } + #userDescription { + position: relative; + top: 0px; + left: 0px; + padding-left:10px; + width:calc(100% - 20px); + text-align: justify; + } + #userTable { + position: relative; + max-width: 420px; + width:calc(100% - 40px); + top: 0px; + left: 0px; + } + } @@ -66,109 +195,114 @@
- - - - - -
-
- -
-

{{username}}

-

{{nickname}}

-

{{joined}}

-

{{numMRI}} MRI Files -

{{numAtlas}} Atlas Files -

{{numProjects}} Projects -

-
- - - - -
- - - - - - - - - - - - {{#MRIFiles}} - - - - - - {{/MRIFiles}} - -
NameVolume DimensionsIncluded
- - {{#name}}{{name}}{{/name}}{{^name}}{{url}}{{/name}} - - {{volDimensions}}{{included}}
- - - - - - - - - - - - - {{#atlasFiles}} - - - - - - - {{/atlasFiles}} - - - - - - - - - - - - - - - - {{#projects}} - - - - - - - - {{/projects}} - - - -
-
-
+ + +
+ +
+ +
+ + +
+

{{username}}

+

{{nickname}}

+

{{joined}}

+

{{numMRI}} MRI Files +

{{numAtlas}} Atlas Files +

{{numProjects}} Projects +

+ + +
+ +
+ MRI Files + Atlas Files + Projects +
+ + +
+ + + + + + + + + + + + {{#MRIFiles}} + + + + + + {{/MRIFiles}} + +
NameVolume DimensionsIncluded
+ + {{#name}}{{name}}{{/name}}{{^name}}{{url}}{{/name}} + + {{volDimensions}}{{included}}
+ + + + + + + + + + + + + {{#atlasFiles}} + + + + + + + {{/atlasFiles}} + + + + + + + + + + + + + + + + {{#projects}} + + + + + + + + {{/projects}} + + + +
+
+ + +
-- GitLab From 264a3ec6edbc19067492b3b3faee5861bd2dfd8e Mon Sep 17 00:00:00 2001 From: roberto Date: Sat, 15 Oct 2016 12:30:38 +0200 Subject: [PATCH 2/2] adjust widths --- views/projectSettings.mustache | 4 ++-- views/user.mustache | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/views/projectSettings.mustache b/views/projectSettings.mustache index 4669aa5..cd7b8f4 100644 --- a/views/projectSettings.mustache +++ b/views/projectSettings.mustache @@ -233,7 +233,7 @@ } #projTable { max-width: 900px; - width: calc(100% - 300px); + width: calc(100% - 260px); padding: 20px; margin-left: 20px; } @@ -251,7 +251,7 @@ left: 0px; padding-left:20px; padding-right: 20px; - width:calc(100% - 250px); + width:calc(100% - 300px); text-align: justify; } #projTable { diff --git a/views/user.mustache b/views/user.mustache index ad7071f..2bddc7d 100644 --- a/views/user.mustache +++ b/views/user.mustache @@ -88,7 +88,7 @@ } #userTable { max-width: 900px; - width: calc(100% - 300px); + width: calc(100% - 220px); margin-left: 20px; margin-top: 0px; } @@ -106,7 +106,7 @@ left: 0px; padding-left:20px; padding-right: 20px; - width:calc(100% - 250px); + width:calc(100% - 300px); text-align: justify; } #userTable { -- GitLab