From 2b5101566c67cbe7789df297be6f6efa9600d70e Mon Sep 17 00:00:00 2001 From: Jan Tuomi Date: Sat, 13 May 2017 12:15:20 +0300 Subject: [PATCH] Mobile styles --- members/static/css/members.css | 86 ++++++++++++++++++++++++----- members/templates/members_base.html | 13 +++-- 2 files changed, 81 insertions(+), 18 deletions(-) diff --git a/members/static/css/members.css b/members/static/css/members.css index b235b31..2677566 100644 --- a/members/static/css/members.css +++ b/members/static/css/members.css @@ -1,5 +1,6 @@ html, body { font-size: 14px; + width: 100%; } div { @@ -44,9 +45,78 @@ input { cursor: default; } -#settings-button { - position: absolute; - bottom: 0; +@media (max-width: 768px) { + + table { + table-layout: fixed; + } + + #sidebar-wrapper { + position: initial; + width: 100%; + margin-left: 0; + text-align: center; + } + + #sidebar-wrapper ul li { + text-align: center; + } + + .logout-container { + position: initial; + margin-bottom: 1rem; + } + + #wrapper { + width: 100%; + } + + /* Force table to not be like tables anymore */ + table, thead, tbody, th, td, tr { + display: block; + } + + thead tr { + background-color: #CCCCCC; + } + + tr { border: 1px solid #ccc; } + + td { + /* Behave like a "row" */ + border: none; + border-bottom: 1px solid #eee; + position: relative; + padding-left: 50%; + } + + td:before { + /* Now like a table header */ + position: absolute; + /* Top/left values mimic padding */ + top: 6px; + left: 6px; + width: 45%; + padding-right: 10px; + white-space: nowrap; + } +} + +@media (min-width: 768px) { + .logout-container { + bottom: 1rem; + position: absolute; + width: 100%; + } + + .logout-container input { + width: 80%; + } + + #settings-button { + position: absolute; + bottom: 0; + } } #download-csv { @@ -125,13 +195,3 @@ input { .inline-title { display: inline; } - -.logout-container { - bottom: 1rem; - position: absolute; - width: 100%; -} - -.logout-container input { - width: 80%; -} \ No newline at end of file diff --git a/members/templates/members_base.html b/members/templates/members_base.html index d032292..71ff9af 100644 --- a/members/templates/members_base.html +++ b/members/templates/members_base.html @@ -33,6 +33,14 @@
+
+ +
+