chiark / gitweb /
Miscellaneous UI fixes. Works a lot better now.
authorMarnanel Thurman <marnanel@thurman.org.uk>
Fri, 3 Dec 2021 22:48:47 +0000 (22:48 +0000)
committerMarnanel Thurman <marnanel@thurman.org.uk>
Fri, 3 Dec 2021 22:48:47 +0000 (22:48 +0000)
www/css/dwim.css
www/index.html

index 0c3dc2365f24702f94d1eadb84ba441ec8097e05..aa04fdf7f15108fda3eb157507a6440d1c7c598f 100644 (file)
@@ -1,16 +1,34 @@
 #login-page .ui-content {
         background-image: url('../lavender-dream-by-huhu.jpg');
         background-size: cover;
-}
-
-.ui-page {
-        height: 100%;
+        height: 100vh;
+        color: #fffdd0;
+        font-weight: bold;
+        font-size: 20pt;
+        text-transform: none;
 }
 
 #login-form {
         text-align: center;
         margin-left: auto;
         margin-right: auto;
+        margin-bottom: auto;
         max-width: 25em;
-        height: 100%;
+        height: 100vh;
+        padding-top: 0;
+        padding-bottom: 0;
+}
+
+#login-page label, #login-title {
+        margin-top: 1em;
+        color: #fffdd0;
+        font-size: 20pt;
+}
+
+#login-message {
+        border: 1px black solid;
+        background-color: #fffdd0;
+        color: #000;
+        font-size: 12pt;
+        display: none;
 }
index 558aac5c543edfe8d03e09874249fa85a093e80b..5db38a9e5d354cfa5c88aae9e9a7b74ad0d836f0 100644 (file)
         <title>dwim</title>
     </head>
     <body>
-               <!-- jquery mobile page 1 -->
-               <div data-role="page" id="login-page">
-                       <div data-role="header">
-                               <h1>Log in</h1>
-                       </div>
+            <!-- jquery mobile page 1 -->
+            <div data-role="page" id="login-page">
+                    <div role="main" id="login-form" class="ui-content">
+                            <div id="login-title">
+                                    Welcome to dwim!
+                            </div>
+
+                            <div id="version">
+                                    0.1 (ridequat)
+                            </div>
 
-                       <div role="main" id="login-form" class="ui-content">
                             <label for="username">Username</label>
                             <input id="username">
                             <label for="password">Password</label>
                             <input id="password" type="password">
-                            <input type="button" id="submitlogin"
-                            value="Log in">
-        </div>
-                                       <a href="#page2">Goto page2</a>
-               </div>
-                       <!-- end of page 1 content -->
-
-                       <div data-role="footer" data-position="fixed">
-                               <h4>Page 1 Footer</h4>
-                       </div>
-                       <!-- end page 1 footer -->
-               </div>
-               <!-- end page 1 -->
+                            <input type="button" id="submit-login"
+                                                 value="Log in">
+                            <div id="login-message">
+                                    ...
+                            </div>
+                    </div>
+                    <!-- end of page 1 content -->
 
-               <!-- jquery mobile page 2 -->
-               <div data-role="page" id="page2">
-                       <div data-role="header">
-                               <h1>Page 2</h1>
-                       </div>
+            </div>
+            <!-- end page 1 -->
 
-                       <div role="main" class="ui-content">
-                               <h4>Page 2 content goes here</h4>
-                               <a href="#page1">Goto page1</a>
-                       </div>
-                       <!-- end of page 2 content -->
+            <!-- jquery mobile page 2 -->
+            <div data-role="page" id="page2">
+                    <div role="main" class="ui-content">
+                            <p>Page 2 content goes here</p>
+                    </div>
+            </div>
+            <!-- end page 2 -->
 
-                       <div data-role="footer" data-position="fixed">
-                               <h4>Page 2 Footer</h4>
-                       </div>
-                       <!-- end page 2 footer -->
-               </div>
-               <!-- end page 2 -->
-<script src="cordova.js"></script><script type="text/javascript" src="js/jquery-1.11.1.min.js" id="cordova-jquery"></script><script type="text/javascript" id="jqm-trans-disable">
-               /* For having a faster transition */
-               $(document).on("mobileinit", function() {
-                               $.mobile.defaultPageTransition = "none";
-                               $.mobile.defaultDialogTransition = "none";
-               });
-               </script><script type="text/javascript" src="js/jquery-1.5.0.mobile.min.js"></script><script src="index.bundle.js"></script></body>
+            <script src="cordova.js"></script>
+            <script type="text/javascript" src="js/jquery-1.11.1.min.js" id="cordova-jquery"></script>
+            <script type="text/javascript" id="jqm-trans-disable">
+                    /* For having a faster transition */
+                    $(document).on("mobileinit", function() {
+                                                $.mobile.defaultPageTransition = "none";
+                                                $.mobile.defaultDialogTransition = "none";
+                                        });
+            </script>
+            <script type="text/javascript" src="js/jquery-1.5.0.mobile.min.js"></script><script src="index.bundle.js"></script>
+    </body>
 </html>