Merge pull request #37 from andydixon/development

Fix hiding clone buttons. Fixes #18

cms/css/editor.css

@@ -13,7 +13,7 @@ body {
 .pageContainer .controls {
     flex: 0 1 auto;
     height: 60px;
-    background-color: #1a1d20;
+    background-color: #666666;
     border-bottom: 1px solid #1a1a1a;
     -webkit-box-shadow: 0 10px 13px -7px #000000, -1px -1px 15px 5px rgba(0, 0, 0, 0);
     box-shadow: 0 10px 13px -7px #000000, -1px -1px 15px 5px rgba(0, 0, 0, 0);
@@ -26,7 +26,7 @@ body {
 
 .controls .logo {
     background-image: url("/cms/img/logo.png");
-    width: 60px;
+    width: 128px;
     height: 60px;
     display: block;
     position: absolute;
@@ -39,40 +39,12 @@ body {
     right: 110px;
 }
 
-
-/* CSS */
-.headerButton {
-    /*display: flex;*/
-    flex-direction: column;
-    align-items: center;
-    padding: 6px 14px;
-    font-family: -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
-    border-radius: 6px;
-    border: none;
-
-    background: #6E6D70;
-    box-shadow: 0px 0.5px 1px rgba(0, 0, 0, 0.1), inset 0px 0.5px 0.5px rgba(255, 255, 255, 0.5), 0px 0px 0px 0.5px rgba(0, 0, 0, 0.12);
-    color: #DFDEDF;
-    user-select: none;
-    -webkit-user-select: none;
-    touch-action: manipulation;
-}
-
-.headerButton:focus {
-    box-shadow: inset 0px 0.8px 0px -0.25px rgba(255, 255, 255, 0.2), 0px 0.5px 1px rgba(0, 0, 0, 0.1), 0px 0px 0px 3.5px rgba(58, 108, 217, 0.5);
-    outline: 0;
-}
-
-.headerButton.dangerButton {
-    background-color: #6E4D50;
-}
-
 .controls #urlbox {
-    margin: 15px 70px;
+    margin: 15px 150px;
     text-align: center;
     font-size: 1.5em;
+    color: black;
     position: absolute;
-    color: #dee2e6;
 }
 
 .controls #urlbox div {
@@ -84,7 +56,6 @@ body {
     position: absolute;
     top: 20px;
     right: 10px;
-    color: #dee2e6;
 }
 
 .controls .buttonContainer ul {
@@ -98,6 +69,61 @@ body {
     margin-right: 10px;
 }
 
+.blueButton {
+    box-shadow: inset 0 0 15px 3px #23395e;
+    background: #2e466e linear-gradient(to bottom, #2e466e 5%, #415989 100%);
+    border-radius: 17px;
+    border: 1px solid #1f2f47;
+    display: inline-block;
+    cursor: pointer;
+    color: #ffffff !important;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 15px;
+    padding: 6px 13px;
+    text-decoration: none !important;
+    text-shadow: 0 1px 0 #263666;
+}
+
+.blueButton:hover {
+    background: #415989 linear-gradient(to bottom, #415989 5%, #2e466e 100%);
+    color: #ffffff;
+    text-decoration: none;
+}
+
+.blueButton:active {
+    text-decoration: none;
+}
+
+.greenButton {
+    box-shadow: inset 0 0 15px 3px #3e7327;
+    background: #77b55a linear-gradient(to bottom, #77b55a 5%, #72b352 100%);
+    border-radius: 17px;
+    border: 1px solid #4b8f29;
+    display: inline-block;
+    cursor: pointer;
+    color: #ffffff;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 15px;
+    padding: 6px 13px;
+    text-decoration: none;
+    text-shadow: 0 1px 0 #5b8a3c;
+}
+
+.greenButton:hover {
+    background: #72b352 linear-gradient(to bottom, #72b352 5%, #77b55a 100%);
+    color: #ffffff;
+    text-decoration: none;
+
+}
+
+.greenButton:active {
+    position: relative;
+    top: 1px;
+    text-decoration: none;
+
+}
+
+
 /**
 New Page Modal
  */

cms/css/login.css

@@ -1,73 +0,0 @@
-body {
-    font-family: Arial, sans-serif;
-    background-color: #111519;
-}
-
-.login-container {
-    width: 350px;
-    margin: 100px auto;
-    padding: 40px;
-    background-color: #212529;
-    border-radius: 8px;
-    box-shadow: 0 4px 10px rgb(0, 0, 0);
-}
-
-.login-container h2 {
-    text-align: center;
-    margin-bottom: 30px;
-    color: #dee2e6;
-}
-
-.login-container label {
-    display: block;
-    margin-bottom: 8px;
-    color: #dee2e6;
-}
-
-.login-container input[type="text"],
-.login-container input[type="password"] {
-    width: 100%;
-    padding: 12px;
-    margin-bottom: 20px;
-    border: 1px solid #1a1a1a;
-    border-radius: 4px;
-    box-sizing: border-box;
-    background: #2b3035;
-    color: #dee2e6;
-}
-
-.login-container button {
-    width: 100%;
-    padding: 12px;
-    background-color: #0066cc;
-    border: none;
-    border-radius: 4px;
-    color: #ffffff;
-    font-size: 16px;
-    cursor: pointer;
-}
-
-.login-container button:hover {
-    background-color: #005bb5;
-}
-
-.error-message {
-    color: #ff4d4d;
-    margin-bottom: 20px;
-    text-align: center;
-}
-
-.logo {
-    display: block;
-    margin: auto;
-}
-
-.shamelessPlug {
-    margin: 12px 0 -30px 0;
-    padding: 0;
-    display: block;
-    text-align: center;
-    color: #111519;
-    font-size: 0.8em;
-
-}

cms/index.php

@@ -9,7 +9,7 @@ spl_autoload_register(function ($class) {
 use NeoCMS\Authentication;
 
 // Instantiate the Authentication class
-$authentication = new Authentication($config['authentication'] ?? []);
+$authentication = new Authentication($config['authentication']??[]);
 
 // Check if the user is logged in
 if (!$authentication->isLoggedIn()) {
@@ -23,12 +23,21 @@ if (!$authentication->isLoggedIn()) {
 <html lang="en-gb">
 <head>
     <title>NeoCMS</title>
+    <!-- Include jQuery -->
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <script src="https://code.jquery.com/ui/1.14.0/jquery-ui.min.js" crossorigin="anonymous"></script>
+    <!-- Include TinyMCE -->
     <script src="/cms/tinymce/tinymce.min.js"></script>
+    <!-- Include Bootstrap for modal -->
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
+
+    <!-- Include JqueryUI CSS -->
     <link rel="stylesheet" href="https://code.jquery.com/ui/1.14.0/themes/base/jquery-ui.css">
+
+    <!-- Include editor styles -->
     <link rel="stylesheet" href="/cms/css/editor.css">
+
+    <!-- Include Bootstrap JS -->
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
 </head>
 <body>
@@ -36,33 +45,24 @@ if (!$authentication->isLoggedIn()) {
 <div class="pageContainer">
     <div class="controls">
         <div class="logo"></div>
-        <?php if ($config['showFullUrl']) {?>
-        <div id="urlbox"></div>
-        <?php } ?>
+       <?php if($config['showFullUrl']) echo '<div id="urlbox"></div>';?>
         <div class="buttonContainer">
             <ul>
-                <li>
-                    <button class="headerButton" id="newPage" role="button">New Page</button>
-                </li>
-                <li>
-                    <button class="headerButton" id="selectPage" role="button">Select Page</button>
-                </li>
-                <li>
-                    <button class="headerButton dangerButton" id="savePage" role="button">Publish Changes</button>
-                </li>
+                <li><a href="#" id="selectPage" class="blueButton">Select Page</a></li>
+                <li><a href="#" id="newPage" class="blueButton">New Page</a></li>
+                <li><a href="#" id="savePage" class="greenButton">Save Changes</a></li>
             </ul>
         </div>
         <div class="loggedInDetails">
-            Logged in as: <?php echo $authentication->getLoggedinUser(); ?><br/>
+            Logged in as: <?php echo $authentication->getLoggedinUser(); ?><br />
             <?php
-            if (!is_writable("logs/")) {
+            if ( ! is_writable("logs/")) {
                 echo "<span class='redText'>Make /cms/logs/ writeable!</span>";
             }
             ?>
         </div>
     </div>
-    <iframe id="frameContainer" src="<?php echo $config['skipWelcomePage'] ? "/" : "welcome.html"; ?>"
-            class="frame"></iframe>
+    <iframe id="frameContainer" src="<?php echo $config['skipWelcomePage'] ? "/" : "welcome.html"; ?>" class="frame"></iframe>
 </div>
 <!-- Modal -->
 <div id="editModal" class="modal fade" role="dialog">

cms/js/cms.js

@@ -266,7 +266,7 @@ $(document).ready(function () {
             $(this).find('.buttonContainer').remove();
             addButtonsToNeoDupe(this);
         });
-        $('#urlbox').html("<strong>Editing:</strong> <div>" + $(iframeDoc)[0].URL + "</div>");
+        $('#urlbox').html("<strong>Editing:</strong> <div>"+$(iframeDoc)[0].URL+"</div>");
     }
 
     // Function to add buttons to a neo-dupe element inside the iframe
@@ -274,7 +274,7 @@ $(document).ready(function () {
 
         /**
          * DANGER WILL ROBINSON: This may break stuff, but is needed for the buttons to be positioned properly
-         * Lets see how we go.
+         * Since this is alpha, lets see how we go.
          */
         if ($(element).css('position') === 'static') {
             $(element).css('position', 'relative');
@@ -285,7 +285,7 @@ $(document).ready(function () {
         $buttonContainer.css("position", "absolute");
         $buttonContainer.css("top", "5px");
         $buttonContainer.css("right", "5px");
-        $buttonContainer.css("z-index", "9999");
+        $buttonContainer.css("z-index","9999");
 
 
         var $duplicateBeforeButton = $(iframeDoc.createElement('button'));

cms/login/index.php

@@ -16,8 +16,8 @@ use NeoCMS\Logger;
 $error = '';
 
 // Instantiate the Authentication and Logger classes
-$authentication = new Authentication($config['authentication'] ?? []);
-$logger = new Logger($config['audit'] ?? true);
+$authentication = new Authentication($config['authentication']??[]);
+$logger = new Logger($config['audit']??true);
 
 if ($_SERVER['REQUEST_METHOD'] === 'POST') {
     $username = $_POST['username'] ?? '';
@@ -47,13 +47,70 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <title>NeoCMS Login</title>
-    <link rel="stylesheet" href="/cms/css/login.css"/>
+    <title>Login</title>
+    <style>
+        /* Basic styling for the login form */
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #eef1f5;
+        }
+
+        .login-container {
+            width: 350px;
+            margin: 100px auto;
+            padding: 40px;
+            background-color: #ffffff;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .login-container h2 {
+            text-align: center;
+            margin-bottom: 30px;
+            color: #333333;
+        }
+
+        .login-container label {
+            display: block;
+            margin-bottom: 8px;
+            color: #555555;
+        }
+
+        .login-container input[type="text"],
+        .login-container input[type="password"] {
+            width: 100%;
+            padding: 12px;
+            margin-bottom: 20px;
+            border: 1px solid #cccccc;
+            border-radius: 4px;
+            box-sizing: border-box;
+        }
+
+        .login-container button {
+            width: 100%;
+            padding: 12px;
+            background-color: #0066cc;
+            border: none;
+            border-radius: 4px;
+            color: #ffffff;
+            font-size: 16px;
+            cursor: pointer;
+        }
+
+        .login-container button:hover {
+            background-color: #005bb5;
+        }
+
+        .error-message {
+            color: #ff4d4d;
+            margin-bottom: 20px;
+            text-align: center;
+        }
+    </style>
 </head>
 <body>
 
 <div class="login-container">
-    <img class="logo" src="/cms/img/loginlogo.png" alt="NeoCMS logo"/>
     <h2>NeoCMS Login</h2>
     <?php if (!empty($error)): ?>
         <div class="error-message"><?php echo htmlspecialchars($error); ?></div>
@@ -66,7 +123,6 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
         <input type="password" id="password" name="password" required>
 
         <button type="submit">Log In</button>
-        <p class="shamelessPlug">NeoCMS &copy;<?php echo date('Y'); ?> Andy Dixon</p>
     </form>
 </div>
 

index.html

@@ -6,6 +6,6 @@
 <body>
 <div class="editable">This is editable content 1.</div>
 <div class="editable">This is editable content 2.</div>
-<div class="editable">This is editable content 3.</div>
+<div class="editable neo-dupe">This is editable content 3, and this element can be cloned.</div>
 </body>
 </html>