Merge branch 'js'

OpenArabicPE · Aug 4, 2017 · 0948df5 · 0948df5
2 parents ea06f57 + 53d195a
commit 0948df5
Show file tree

Hide file tree

Showing 10 changed files with 1,190 additions and 126 deletions.
diff --git a/assets/icons/check-circle.svg b/assets/icons/check-circle.svg
diff --git a/assets/icons/circle.svg b/assets/icons/circle.svg
diff --git a/assets/icons/settings.svg b/assets/icons/settings.svg
diff --git a/css/teibp_navigation-slideout.css b/css/teibp_navigation-slideout.css
@@ -1,3 +1,6 @@
+/*****************
+CSS for styling slide-out panels
+*****************/
 .c_sidenav {
       background-color:white;
       border:1px solid #e5e5e5;
@@ -27,7 +30,8 @@ nav ul {
 
 /* set transition times */
 .c_sidenav,
-nav,
+.c_sidebar,
+/*nav,*/
 #body {
       transition: 0.5s
 }
@@ -99,7 +103,7 @@ nav a * {
 slideout: using class c_sidebar-visible;
 *************************/
 /*move everything left*/
-#navigation.c_sidebar-visible {
+.c_sidenav.c_sidebar-visible {
    width: 300px;
 }
 #sidebar-buttons.c_sidebar-visible {
@@ -108,4 +112,23 @@ slideout: using class c_sidebar-visible;
 #body.c_sidebar-visible {
    margin-right: 300px;
    margin-left: -300px;
+}
+
+/**********************
+the settings panel
+**********************/
+#settings > div {
+   padding-left: 10px;
+   padding-right: 10px;
+}
+#settings .c_button > * {
+   /*clear: both;*/
+   float: left;
+}
+
+#settings .c_button > .c_icon {
+   left: 0px;
+}
+#settings .c_button > .c_label {
+   left: 40px;
 }
diff --git a/css/teibp_sidebar-buttons.css b/css/teibp_sidebar-buttons.css
@@ -5,13 +5,16 @@ div.c_sidebar {
     display: block;
     width: 40px;
     right: 0px;
-    transition: 0.5s;
+    /*transition: 0.5s;*/
     /*set margin and padding to zero */
     margin: 0;
     padding: 0;
 }
+.c_button {
+    cursor: pointer;
+}
 
-div.c_button-sidebar{
+.c_button-sidebar{
     display: block;
     background-color:white;
     border:1px solid #e5e5e5;
@@ -51,15 +54,15 @@ div.c_button-sidebar > * {
     padding-right:0.2em;*/
 }
 /* show icon */
-div.c_button-sidebar > *.c_icon {
+div.c_button > .c_icon {
     display: block;
     /* icons should inherit the full width*/
     width: 24px;
     margin-left: 8px;
     margin-right: 8px;
 }
 /* do not display label */
-div.c_button-sidebar > *.c_label {
+div.c_button-sidebar > .c_label {
     visibility: hidden;
     /*padding-left: 40px;*/
     /*width: 200px;*/
@@ -89,126 +92,59 @@ div.c_button-sidebar:focus > *.c_label {
 
 /* sort order of buttons and stack them vertically */
 /*#menu,*/
-#menuOpen,
-#menuClose,
-#toggleSidebar {
-    top: 0px;
+#toggleSettings {
+    top:0px;
 }
-#xmlSourceLink{
+#toggleNav {
     top:40px;
 }
-#backToTop{
+#xmlSourceLink{
     top:80px;
 }
-#goToBottom {
+#backToTop{
     top:120px;
 }
-#prevIssue{
+#goToBottom {
     top:160px;
 }
-#nextIssue{
+#prevIssue{
     top:200px;
 }
-/* the first button toggling display features should have a leading gap*/
-#toggleLb {
+#nextIssue{
     top:240px;
 }
+/* the first button toggling display features should have a leading gap*/
+/*#toggleLb {
+    bottom:0px;
+}*/
 /* change toggled buttons*/
-#toggleLb.c_toggled{
+#toggleLb.c_toggled,
+#toggleLb.c_on{
     /*color: white;
     background-color: black;*/
     border: 1px solid rgba(0, 0, 0, 0.4);
     box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.6);
 }
-#toggleSidebar >.c_open {
+.c_button-toggle >.c_on,
+.c_button-toggle.c_off >.c_on {
     display: block;
 }
-#toggleSidebar >.c_close {
+.c_button-toggle >.c_off,
+.c_button-toggle.c_off > .c_off {
     display: none;
 }
-#toggleSidebar.c_toggled >.c_open {
+.c_button-toggle.c_toggled >.c_on,
+.c_button-toggle.c_on >.c_on {
     display: none;
 }
-#toggleSidebar.c_toggled >.c_close {
+.c_button-toggle.c_toggled >.c_off,
+.c_button-toggle.c_on > .c_off {
     display: block;
 }
 /* content of buttons */
-#c_sidebar svg {
+.c_button-sidebar svg,
+.c_button svg {
     display: block;
-    width: 100%;
-    height: 100%;
-}
-/*#toggleSidebar:before {
-   content: url("../assets/icons/list.svg");
-   display: block;
-   position: fixed;
-   margin: auto;
-   padding-left:0.5em;
-    padding-right:0.5em;
-    padding-top:0.5em;
-    padding-bottom:0.5em;
-}*/
-/*#toggleSidebar.c_toggled:before {
-   content: url("../assets/icons/x.svg");
-   display: block;
-   position: fixed;
-   margin: auto;
-   padding-left:0.5em;
-    padding-right:0.5em;
-    padding-top:0.5em;
-    padding-bottom:0.5em;
-}*/
-/*#xmlSourceLink:before{
-    content: url("../assets/icons/download.svg");
-    font-size:20px;
-   padding-left:0.5em;
-    padding-right:0.5em;
-    padding-top:0.5em;
-    padding-bottom:0.5em;
-    position:fixed;
-}*/
-/*#prevIssue:before{
-    content: url("../assets/icons/chevron-left.svg");
-    font-size:20px;
-    padding-left:0.5em;
-    padding-right:0.5em;
-    padding-top:0.5em;
-    padding-bottom:0.5em;
-    position:fixed;
-}*/
-/*#nextIssue:before{
-    content: url("../assets/icons/chevron-right.svg");
-    font-size:20px;
-    padding-left:0.5em;
-    padding-right:0.5em;
-    padding-top:0.5em;
-    padding-bottom:0.5em;
-    position:fixed;
-}*/
-/*#backToTop:before{
-    content: url("../assets/icons/arrow-up.svg");
-    font-size:20px;
-    padding-left:0.5em;
-    padding-right:0.5em;
-    padding-top:0.5em;
-    padding-bottom:0.5em;
-    position:fixed;
-}*/
-/*#goToBottom:before{
-    content: url("../assets/icons/arrow-down.svg");
-    font-size:20px;
-    padding-left:0.5em;
-    padding-right:0.5em;
-    padding-top:0.5em;
-    padding-bottom:0.5em;
-    position:fixed;
-}*/
-/*#toggleLb:before{
-    content:"lb";
-    font-size:20px;
-    padding-left:0.5em;
-    padding-right:0.5em;
-    padding-top:0.5em;
-    padding-bottom:0.5em;
-    position:fixed;
+    width: 22px;
+    height: 22px;
 }