Make stuff responsive. closes #6

extensions/tags/js/src/components/tag-discussion-modal.js

@@ -1,6 +1,7 @@
 import FormModal from 'flarum/components/form-modal';
 import DiscussionPage from 'flarum/components/discussion-page';
 import highlight from 'flarum/helpers/highlight';
+import icon from 'flarum/helpers/icon';
 import classList from 'flarum/utils/class-list';
 
 import tagLabel from 'flarum-tags/helpers/tag-label';
@@ -89,7 +90,9 @@ export default class TagDiscussionModal extends FormModal {
               onblur: () => this.focused(false)
             })
           ]),
-          m('button[type=submit].btn.btn-primary', {disabled: !selected.length}, 'Confirm')
+          m('span.primary-control',
+            m('button[type=submit].btn.btn-primary', {disabled: !selected.length}, icon('check icon'), m('span.label', 'Confirm'))
+          )
         ])
       ],
       footer: [

extensions/tags/js/src/components/tag-nav-item.js

@@ -16,7 +16,7 @@ export default class TagNavItem extends NavItem {
     }
 
     return m('li'+(active ? '.active' : ''),
-      m('a', {
+      m('a.has-icon', {
         href: this.props.href,
         config: m.route,
         onclick: () => {

extensions/tags/js/src/components/tags-page.js

@@ -56,9 +56,10 @@ export default class TagsPage extends Component {
           ]),
           cloud.length ? m('div.tag-cloud', [
             m('h4', 'Tags'),
-            m('div.tag-cloud-content', cloud.map(tag =>
+            m('div.tag-cloud-content', cloud.map(tag => [
-              m('a', {href: app.route.tag(tag), config: m.route, style: tag.color() ? 'color: '+tag.color() : ''}, tag.name())
+              m('a', {href: app.route.tag(tag), config: m.route, style: tag.color() ? 'color: '+tag.color() : ''}, tag.name()),
-            ))
+              ' '
+            ]))
           ]) : ''
         ])
       ])

extensions/tags/less/extension.less

@@ -100,33 +100,43 @@
 .tag-discussion-modal {
   & .modal-header {
     background: @fl-body-secondary-color;
-    padding: 20px;
+    padding: 20px 20px 0;
 
     & h3 {
       text-align: left;
       color: @fl-body-muted-color;
       font-size: 16px;
     }
+
+    @media @phone {
+      padding: 0;
+    }
   }
   & .modal-body {
-    padding: 0 20px 20px;
+    padding: 20px;
+
+    @media @phone {
+      padding: 15px;
+    }
   }
   & .modal-footer {
     padding: 1px 0 0;
     text-align: left;
   }
 }
-.tags-form {
+@media @tablet, @desktop, @desktop-hd {
-  padding-right: 100px;
+  .tags-form {
-  overflow: hidden;
+    padding-right: 100px;
+    overflow: hidden;
 
-  & .tags-input {
+    & .tags-input {
-    float: left;
+      float: left;
-  }
+    }
-  & .btn {
+    & .primary-control {
-    margin-right: -100px;
+      margin-right: -100px;
-    float: right;
+      float: right;
-    width: 85px;
+      width: 85px;
+    }
   }
 }
 .tags-input {
@@ -161,6 +171,10 @@
   overflow: auto;
   max-height: 50vh;
 
+  @media @phone {
+    max-height: none;
+  }
+
   & > li {
     padding: 7px 20px;
     overflow: hidden;
@@ -189,10 +203,18 @@
       width: 150px;
       margin-right: 10px;
       margin-left: 10px;
+
+      @media @phone {
+        width: auto;
+      }
     }
     & .description {
       color: @fl-body-muted-color;
       font-size: 12px;
+
+      @media @phone {
+        display: none;
+      }
     }
     &.selected {
       & .tag-icon {
@@ -226,25 +248,31 @@
   margin: 0;
   overflow: hidden;
 
+  @media @phone {
+    margin: -15px -15px 0;
+  }
+
   & > li {
-    float: left;
-    width: ~"calc(50% - 1px)";
     height: 200px;
-    margin-right: 1px;
     margin-bottom: 1px;
     overflow: hidden;
 
-    &:first-child {
+    @media @tablet, @desktop, @desktop-hd {
-      border-top-left-radius: @border-radius-base;
+      float: left;
-    }
+      width: ~"calc(50% - 1px)";
-    &:nth-child(2) {
+      margin-right: 1px;
-      border-top-right-radius: @border-radius-base;
+      &:first-child {
-    }
+        border-top-left-radius: @border-radius-base;
-    &:nth-last-child(2):nth-child(even), &:last-child {
+      }
-      border-bottom-right-radius: @border-radius-base;
+      &:nth-child(2) {
-    }
+        border-top-right-radius: @border-radius-base;
-    &:nth-last-child(2):nth-child(odd), &:last-child:nth-child(odd) {
+      }
-      border-bottom-left-radius: @border-radius-base;
+      &:nth-last-child(2):nth-child(even), &:last-child {
+        border-bottom-right-radius: @border-radius-base;
+      }
+      &:nth-last-child(2):nth-child(odd), &:last-child:nth-child(odd) {
+        border-bottom-left-radius: @border-radius-base;
+      }
     }
   }
 }
@@ -303,6 +331,9 @@
     padding-top: 17px;
     padding-bottom: 17px;
     color: fade(#fff, 50%);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
 
     & .title {
       margin-right: 15px;
@@ -310,7 +341,7 @@
   }
 }
 .tag-cloud {
-  margin-top: 30px;
+  margin-top: 50px;
   text-align: center;
 
   & h4 {
@@ -330,6 +361,7 @@
 }
 .tag-cloud-content {
   font-size: 14px;
+  line-height: 1.7;
 
   &, & a {
     color: @fl-body-muted-color;