Parcourir la source

admin pages now use responsive design a bit more

teo greenwood il y a 11 ans
Parent
commit
55d94b0ca6
4 fichiers modifiés avec 26 ajouts et 36 suppressions
  1. 22 3
      css/screen.css
  2. 0 25
      sys/admin/index.js
  3. 2 6
      sys/admin/index.php
  4. 2 2
      sys/admin/mbengine.inc

+ 22 - 3
css/screen.css

@@ -93,6 +93,15 @@ textarea {
  background-color: black;
  text-align: center;
 }
+/* admin styles */
+#mbengine {
+ width: 100%;
+ display: table;
+}
+#submissions {
+ width: 20%;
+ display: table-cell;
+}
 #stories {
  vertical-align: top;
 }
@@ -247,7 +256,7 @@ p.posteditortitle {
   #clickme {
     display: table-cell !important;
   }
-  #righttitle {
+  #righttitle, #configbar {
     visibility: hidden;
     position: fixed;
     top: 2rem;
@@ -257,11 +266,21 @@ p.posteditortitle {
     background-color: rgba(0,0,0,.75);
     border-bottom-left-radius: 1em;
   }
-  #clickme:active ~ #righttitle, #clickme:focus ~ #righttitle, #righttitle:hover, #righttitle a:active  {
+  #clickme:active ~ #righttitle, #clickme:focus ~ #righttitle, #righttitle:hover, #righttitle a:active, #clickme:active ~ #configbar, #clickme:focus ~ #configbar, #configbar:hover, #configbar a:active  {
     visibility: visible;
   }
-  #righttitle a {
+  #righttitle a, #configbar a {
     display: block;
     border-right: 0;
   }
 }
+@media (max-width: 700px) {
+  #mbengine {
+   width: 100%;
+   display: block;
+  }
+  #submissions {
+   width: 100%;
+   display: block;
+  }
+}

+ 0 - 25
sys/admin/index.js

@@ -1,25 +0,0 @@
-window.onload = navResize;
-window.onresize = navResize;
-
-function navResize() {
-	if (window.innerWidth < 700) {
-		//Hide original div, create new one if it doesn't exist
-		document.getElementById('configbar').style.display = 'none';
-		document.getElementById('menubutton').style.display = '';
-	} else {
-		//Show original div, axe new one
-		document.getElementById('configbar').style.display = '';
-		document.getElementById('menubutton').style.display = 'none';
-		document.getElementById('littlemenu').style.display = 'none';
-	}
-}
-
-function showMenu() {
-	if (document.getElementById('littlemenu').style.display == 'none') {
-		var pasta = document.getElementById('configbar').innerHTML;
-		document.getElementById('littlemenu').innerHTML = pasta;
-		document.getElementById('littlemenu').style.display = '';
-	} else {
-		document.getElementById('littlemenu').style.display = 'none';
-	}
-}

+ 2 - 6
sys/admin/index.php

@@ -3,6 +3,7 @@
  <head>
   <meta charset="utf-8" />
   <meta name="description" content="tCMS Control Panel"/>
+  <meta name="viewport" content="width=device-width">
   <link rel="stylesheet" type="text/css" href="../../css/structure.css" />
   <link rel="stylesheet" type="text/css" href="../../css/screen.css" media="screen" />
   <link rel="stylesheet" type="text/css" href="../../css/print.css" media="print" />
@@ -11,20 +12,15 @@
   <?php
    extract(json_decode(file_get_contents('config/main.json'),true));
   ?>
-  <script src="/sys/admin/index.js"></script>
  </head>
  <body>
   <div id="topkek" style="text-align: center; vertical-align: middle;">
+   <button title="Menu" id="clickme">&#9776;</button>
    <span id="configbar">
     <a class="topbar" title="Edit Various Settings" href="index.php">Settings</a>
     <a class="topbar" title="Blog Writer" href="index.php?nav=1">Blog Writer</a>
     <a class="topbar" title="Pop off about Stuff" href="index.php?nav=2">MicroBlogger</a>
    </span>
-   <button style="display: none;" id="menubutton" onClick="showMenu();return false;">
-    &#9776;
-   </button>
-  </div>
-  <div id="littlemenu" style="display: none;">
   </div>
   <div id="kontent" style="display: block;">
    <?php

+ 2 - 2
sys/admin/mbengine.inc

@@ -53,8 +53,8 @@
   }
   //DOM below
 ?>
-<div style="width: 100%; display: table;">
- <div style="width: 20%; display: table-cell;">
+<div id="mbengine">
+ <div id="submissions">
   <p class="title">Submissions:</p>
   <form id="Submissions" method="POST">
    Title<br /><input class="cooltext" type="text" name="title" />