Responsiveness tweaks

verma · Mar 15, 2014 · 3e7a608 · 3e7a608
1 parent 8da7f08
commit 3e7a608
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 28 deletions.
diff --git a/resources/templates/index.mustache b/resources/templates/index.mustache
@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="">
     <meta name="author" content="">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">
 	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700' rel='stylesheet' type='text/css'>
 
@@ -17,6 +18,7 @@
 	<style>
 		body  {
 			font-family: 'Open Sans', sans-serif;
+			overflow-x: hidden;
 		}
 
 		.name {
@@ -33,7 +35,6 @@
 		}
 
 		.listing {
-			font-size: 20px;
 			margin: 20px 0px;
 		}
 
@@ -58,11 +59,11 @@
 		}
 		.listing .list-item-name {
 			font-weight: bold;
+			word-wrap: break-word;
 		}
 
 		.listing .subitem {
 			font-weight: normal;
-			font-size: 14px;
 			color: #999;
 		}
 
@@ -81,27 +82,17 @@
 		.listing .list-item-tag-button {
 		}
 
-		@media (max-width: 768px) {
-			.listing .list-item-size {
-				text-align: left;
-			}
-			.listing .list-item-modified {
-				text-align: left;
-			}
-		}
-
-		a.target-link:hover {
-			text-decoration: none;
-		}
-
-
 		.current-path {
+			font-family: 'Open Sans', sans-serif;
 			color: #999;
 		}
 
 		.current-path a {
 			padding: 0px 5px;
 		}
+		a.target-link:hover {
+			text-decoration: none;
+		}
 
 		.no-files {
 			position: absolute;
@@ -162,6 +153,7 @@
 		.stats .tags {
 			margin-right: 20px;
 		}
+
 		.nodownloads {
 			width: 100%;
 			text-align: center;
@@ -228,6 +220,61 @@
 			color: gray;
 		}
 
+		@media (max-width: 320px) {
+			.stats {
+				float: left;
+				margin-top: 0px;
+			}
+
+		}
+		@media (max-width: 480px) {
+			.listing {
+				font-size: 12px;
+			}
+
+			.listing .list-item-modified {
+				text-align: left;
+			}
+			.listing .list-item-size {
+				text-align: left;
+			}
+
+			.current-path {
+				font-size: 10px;
+				word-wrap: break-word;
+			}
+		}
+
+		@media (max-width: 768px) {
+			.listing {
+				font-size: 16px;
+			}
+
+			.current-path {
+				font-size: 16px;
+				font-weight: bold;
+			}
+		}
+
+		@media (max-width: 1024px) {
+			.current-path {
+				font-size: 16px;
+				font-weight: bold;
+			}
+		}
+
+		@media (min-width: 1024px) {
+			.listing {
+				font-size: 18px;
+			}
+			.current-path {
+				font-size: 18px;
+				font-weight: bold;
+			}
+		}
+
+
+
 	</style>
 
     <!-- Just for debugging purposes. Don't actually copy this line! -->
@@ -257,7 +304,7 @@
 		<div class="btn-group btn-group-justified" id="sorter">
 			<a class="btn btn-default" role="button" id="action-sort-name">Name <span id="sort-name"><span></a>
 			<a class="btn btn-default" role="button" id="action-sort-size">Size <span id="sort-size"></span></a>
-			<a class="btn btn-default" role="button" id="action-sort-modified">Date Modified <span id="sort-modified"></span></a>
+			<a class="btn btn-default" role="button" id="action-sort-modified">Date <span id="sort-modified"></span></a>
 		</div>
 
 		<div class="listing">

diff --git a/src-cljs/index/start.cljs b/src-cljs/index/start.cljs
@@ -82,13 +82,13 @@
 (defn format-size [n]
   (let [[size postfix] (cond
                         (< n 1000) [n "B"]
-                        (< n 1000000) [(/ n 1000) "KB"]
-                        (< n 1000000000) [(/ n 1000000.0) "MB"]
-                        (< n 1000000000000) [(/ n 1000000000.0) "GB"]
-                        (< n 1000000000000000) [(/ n 1000000000000.0) "TB"]
+                        (< n 1000000) [(/ n 1000) "K"]
+                        (< n 1000000000) [(/ n 1000000.0) "M"]
+                        (< n 1000000000000) [(/ n 1000000000.0) "G"]
+                        (< n 1000000000000000) [(/ n 1000000000000.0) "T"]
                         :else [n "B"])
-         fixedSize (if (< n 1000000) 0 2)]
-    (apply str [(.toFixed size fixedSize) " " postfix])))
+         fixedSize (if (< n 1000000) 0 1)]
+    (apply str [(.toFixed size fixedSize) postfix])))
 
 (defn sort-files [files]
   (let [f (@current-sort-key sort-funcs)]
@@ -171,10 +171,9 @@
                            [:div {:class "col-sm-10 list-item-name"} (linked n)]
                            [:div {:class "col-sm-2 list-item-size"} (file-size n)]
                            ]
-                          [:div.subitem {}
-                           [:div.row {}
-                            [:div {:class "col-sm-6 list-item-tag-button"} (tagged n)]
-                            [:div {:class "col-sm-6 list-item-modified"} (format-date n)]]]]
+                          [:div.row.subitem {}
+                           [:div {:class "col-sm-6 list-item-tag-button"} (tagged n)]
+                           [:div {:class "col-sm-6 list-item-modified"} (format-date n)]]]
                          [:div {:class "col-sm-2 tag-button-container"}
                           [:button {:class "btn btn-default btn-lg tag-item-action"} "Tag"]]]]))]
 
@@ -388,7 +387,7 @@
         (.modal ($ "#downloadsModal")))))
 
 (defn startup []
-  (set-sort :name true)
+  (set-sort :modified false)
   (hide-no-files-indicator)
   (hide-loading-indicator)
   (hide-error)