Updated tag.cloud for mobile

kcaran · Sep 2, 2020 · 92f7b13 · 92f7b13
1 parent 898b83c
commit 92f7b13
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 12 deletions.
diff --git a/css/shaarli.css b/css/shaarli.css
@@ -4286,7 +4286,13 @@ pre {
   text-align: center; }
 
 .linklist-item-tags {
-  margin: 1em 0; }
+  margin: 1em 0 1em 24px;
+  position: relative; }
+  .linklist-item-tags .ctrl-checkbox {
+    position: absolute;
+    left: -24px; }
+  .linklist-item-tags .label-tag {
+    margin-bottom: 12px; }
 
 h2.linklist-item-title {
   margin: 0;
@@ -4982,6 +4988,9 @@ form[name='linkform'].page-form {
       margin: 3px 2px; }
   .pure-g .page-form {
     padding: 4px 1em; }
+  .pure-g .cloudtag-container {
+    margin: 0 -1em;
+    font-size: 0.8em; }
   #search-tagcloud {
     width: 100%; }
   .taglist-container .tag-list-item {

diff --git a/sass/shaarli.scss b/sass/shaarli.scss
@@ -659,7 +659,15 @@ pre {
 }
 
 .linklist-item-tags {
-	margin: 1em 0;
+	margin: 1em 0 1em 24px;
+	position: relative;
+	.ctrl-checkbox {
+		position: absolute;
+		left: -24px;
+	}
+	.label-tag {
+		margin-bottom: 12px;
+	}
 }
 
 h2.linklist-item-title {
@@ -1742,6 +1750,11 @@ form {
 		padding: 4px 1em;
 	}
 
+	.pure-g .cloudtag-container {
+		margin: 0 -1em;
+		font-size: 0.8em;
+	}
+
 	#search-tagcloud {
 		width: 100%;
 	}

diff --git a/tag.cloud.html b/tag.cloud.html
@@ -13,26 +13,24 @@
 
     {$countTags=count($tags)}
     <h2 class="window-title">{'Tag cloud'|t} &middot; {$countTags} {'tags'|t}</h2>
-    <div id="search-tagcloud">
-        <form method="GET">
-          <input type="hidden" name="do" value="tagcloud">
-          <input type="text" name="searchtags" aria-label="{'Filter by tag'|t}" placeholder="{'Filter by tag'|t}"
+    <form id="search-tagcloud" method="GET">
+        <input type="hidden" name="do" value="tagcloud">
+        <input type="text" name="searchtags" aria-label="{'Filter by tag'|t}" placeholder="{'Filter by tag'|t}"
                  {if="!empty($search_tags)"}
-                    value="{$search_tags}"
+                  value="{$search_tags}"
                  {/if}
           autocomplete="off" data-multiple data-autofirst data-minChars="1"
           data-list="{loop="$tags"}{$key}, {/loop}"
           class="autofocus"
           >
 
-          <button type="submit" class="search-button" aria-label="{'Search'|t}"><i class="fa fa-search" aria-hidden="true"></i></button>
+        <button type="submit" class="search-button" aria-label="{'Search'|t}"><i class="fa fa-search" aria-hidden="true"></i></button>
 
-          {if="!empty($search_tags)"}
+        {if="!empty($search_tags)"}
           <a href="{$base_path}/?searchtags={$search_tags|urlencode}" class="pure-button">{'Show links'|t}</a>
-          {/if}
+        {/if}
 
-        </form>
-    </div>
+    </form>
 
     <div id="plugin_zone_start_tagcloud" class="plugin_zone">
       {loop="$plugin_start_zone"}