Browse Source

Beginning of a more responsive sidebar

Phyks (Lucas Verney) 5 years ago
parent
commit
42662200aa

+ 10
- 10
app/components/layouts/Sidebar.jsx View File

@@ -24,16 +24,16 @@ class SidebarLayoutIntl extends Component {
24 24
         };
25 25
         return (
26 26
             <div>
27
-                <div className="col-sm-1 col-md-2 hidden-xs" styleName="sidebar">
27
+                <div className="col-xs-12 col-md-1 col-lg-2" styleName="sidebar">
28 28
                     <h1 className="text-center" styleName="title">
29 29
                         <IndexLink to="/" styleName="link">
30 30
                             <img alt="A" src="./app/assets/img/ampache-blue.png" styleName="imgTitle" />
31
-                            <span className="hidden-sm">mpache</span>
31
+                            <span className="hidden-md">mpache</span>
32 32
                         </IndexLink>
33 33
                     </h1>
34 34
                     <nav aria-label={formatMessage(sidebarLayoutMessages["app.sidebarLayout.mainNavigationMenu"])}>
35 35
                         <div className="navbar text-center" styleName="icon-navbar">
36
-                            <div className="container-fluid">
36
+                            <div className="container-fluid" styleName="container-fluid">
37 37
                                 <ul className="nav navbar-nav" styleName="nav">
38 38
                                     <li>
39 39
                                         <Link to="/" title={formatMessage(sidebarLayoutMessages["app.sidebarLayout.home"])} styleName="link">
@@ -66,7 +66,7 @@ class SidebarLayoutIntl extends Component {
66 66
                             <li>
67 67
                                 <Link to="/discover" title={formatMessage(sidebarLayoutMessages["app.sidebarLayout.discover"])} styleName={isActive.discover}>
68 68
                                     <span className="glyphicon glyphicon-globe" aria-hidden="true"></span>
69
-                                    <span className="hidden-sm">
69
+                                    <span className="hidden-md">
70 70
                                         &nbsp;<FormattedMessage {...sidebarLayoutMessages["app.sidebarLayout.discover"]} />
71 71
                                     </span>
72 72
                                 </Link>
@@ -74,18 +74,18 @@ class SidebarLayoutIntl extends Component {
74 74
                             <li>
75 75
                                 <Link to="/browse" title={formatMessage(sidebarLayoutMessages["app.sidebarLayout.browse"])} styleName={isActive.browse}>
76 76
                                     <span className="glyphicon glyphicon-headphones" aria-hidden="true"></span>
77
-                                    <span className="hidden-sm">
77
+                                    <span className="hidden-md">
78 78
                                         &nbsp;<FormattedMessage {...sidebarLayoutMessages["app.sidebarLayout.browse"]} />
79 79
                                     </span>
80 80
                                 </Link>
81
-                                <ul className="nav nav-list text-center">
81
+                                <ul className="nav text-center" styleName="nav-list">
82 82
                                     <li>
83 83
                                         <Link to="/artists" title={formatMessage(sidebarLayoutMessages["app.sidebarLayout.browseArtists"])} styleName={isActive.artists}>
84 84
                                             <span className="glyphicon glyphicon-user" aria-hidden="true"></span>
85 85
                                             <span className="sr-only">
86 86
                                                 <FormattedMessage {...sidebarLayoutMessages["app.common.artist"]} values={{itemCount: 42}} />
87 87
                                             </span>
88
-                                            <span className="hidden-sm">
88
+                                            <span className="hidden-md">
89 89
                                                 &nbsp;<FormattedMessage {...sidebarLayoutMessages["app.common.artist"]} values={{itemCount: 42}} />
90 90
                                             </span>
91 91
                                         </Link>
@@ -94,7 +94,7 @@ class SidebarLayoutIntl extends Component {
94 94
                                         <Link to="/albums" title={formatMessage(sidebarLayoutMessages["app.sidebarLayout.browseAlbums"])} styleName={isActive.albums}>
95 95
                                             <span className="glyphicon glyphicon-cd" aria-hidden="true"></span>
96 96
                                             <span className="sr-only"><FormattedMessage {...sidebarLayoutMessages["app.common.album"]} values={{itemCount: 42}} /></span>
97
-                                            <span className="hidden-sm">
97
+                                            <span className="hidden-md">
98 98
                                                 &nbsp;<FormattedMessage {...sidebarLayoutMessages["app.common.album"]} values={{itemCount: 42}} />
99 99
                                             </span>
100 100
                                         </Link>
@@ -105,7 +105,7 @@ class SidebarLayoutIntl extends Component {
105 105
                                             <span className="sr-only">
106 106
                                                 <FormattedMessage {...sidebarLayoutMessages["app.common.song"]} values={{itemCount: 42}} />
107 107
                                             </span>
108
-                                            <span className="hidden-sm">
108
+                                            <span className="hidden-md">
109 109
                                                 &nbsp;<FormattedMessage {...sidebarLayoutMessages["app.common.song"]} values={{itemCount: 42}} />
110 110
                                             </span>
111 111
                                         </Link>
@@ -115,7 +115,7 @@ class SidebarLayoutIntl extends Component {
115 115
                             <li>
116 116
                                 <Link to="/search" title={formatMessage(sidebarLayoutMessages["app.sidebarLayout.search"])} styleName={isActive.search}>
117 117
                                     <span className="glyphicon glyphicon-search" aria-hidden="true"></span>
118
-                                    <span className="hidden-sm">
118
+                                    <span className="hidden-md">
119 119
                                         &nbsp;<FormattedMessage {...sidebarLayoutMessages["app.sidebarLayout.search"]} />
120 120
                                     </span>
121 121
                                 </Link>

+ 1
- 1
app/dist/fix.ie9.js.map
File diff suppressed because it is too large
View File


+ 20
- 20
app/dist/index.js
File diff suppressed because it is too large
View File


+ 1
- 1
app/dist/index.js.map
File diff suppressed because it is too large
View File


+ 1
- 1
app/dist/style.css
File diff suppressed because it is too large
View File


+ 14
- 0
app/styles/Songs.scss View File

@@ -0,0 +1,14 @@
1
+@media (max-width: 767px) {
2
+    .songs {
3
+        > thead,
4
+        > tbody,
5
+        > tfoot {
6
+            > tr {
7
+                > th,
8
+                > td {
9
+                    padding: 5px;
10
+                }
11
+            }
12
+        }
13
+    }
14
+}

+ 31
- 22
app/styles/layouts/Sidebar.scss View File

@@ -46,23 +46,33 @@ $lightgrey: #eee;
46 46
 .title {
47 47
     margin: 0;
48 48
     margin-bottom: 20px;
49
+    font-size: 26px;
49 50
 }
50 51
 
51 52
 .imgTitle {
52
-    height: 46px;
53
+    height: 36px;
53 54
 }
54 55
 
55 56
 /* Sidebar navigation */
56 57
 .icon-navbar {
57 58
     background-color: #555;
58
-    font-size: 1.25em;
59
+    font-size: 1.2em;
59 60
     border: none;
60 61
 
62
+    .container-fluid {
63
+        padding-left: 0;
64
+        padding-right: 0;
65
+    }
66
+
61 67
     .nav {
62 68
         display: inline-block;
63 69
         float: none;
64 70
         vertical-align: top;
65 71
         text-align: center;
72
+
73
+        li {
74
+            float: left;
75
+        }
66 76
     }
67 77
 }
68 78
 
@@ -75,33 +85,32 @@ $lightgrey: #eee;
75 85
 
76 86
 /*
77 87
  * Media queries
78
- * TODO: Sidebar responsiveness
79 88
  */
80
-/*@media (max-width: 991px) {
81
-    .sidebar,
82
-    .sidebar .navbar .container-fluid {
83
-        padding-left: 5px;
84
-        padding-right: 5px;
89
+@media (min-width: 992px) and (max-width: 1199px) {
90
+    .icon-navbar {
91
+        .nav {
92
+            li {
93
+                float: none;
94
+            }
95
+        }
85 96
     }
86 97
 
87
-    .sidebar .nav-list {
98
+    .nav-list {
88 99
         text-align: right;
89 100
     }
90 101
 
91
-    .sidebar .nav-sidebar > li > a {
92
-        padding-left: 20px;
93
-        padding-right: 20px;
94
-    }
95
-
96
-    .sidebar .nav-list > li > a {
97
-        padding-left: 20px;
98
-        padding-right: 20px;
102
+    .nav {
103
+        li {
104
+            a {
105
+                padding-left: 5px;
106
+                padding-right: 5px;
107
+            }
108
+        }
99 109
     }
100 110
 }
101 111
 
102
-@media (min-width: 768px) {
103
-    .main-panel {
104
-        padding-right: 40px;
105
-        padding-left: 40px;
112
+@media (max-width: 991px) {
113
+    .sidebar {
114
+        position: static;
106 115
     }
107
-}*/
116
+}