Mobile styles

2017-05-13 12:15:20 +03:00
parent 850ff0a74d
commit 2b5101566c
2 changed files with 81 additions and 18 deletions
@@ -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%;
-}
@@ -33,6 +33,14 @@
    <body>
        <div id="wrapper">

+            <div class="page-content-container">
+                <div id="header">
+                    <h1>
+                        {% trans "Member register of SIK ry" %}
+                    </h1>
+                </div>
+            </div>
+
            <!-- Sidebar -->
            <div id="sidebar-wrapper">
                <ul class="sidebar-nav">
@@ -75,11 +83,6 @@

            <div class="page-content-container">
                <!-- Page Content -->
-                <div id="header">
-                    <h1>
-                        {% trans "Member register of SIK ry" %}
-                    </h1>
-                </div>

                {% block content %}
                {% endblock content %}