Item12180: layout changes with fixed sections

git-svn-id: http://svn.foswiki.org/trunk@15879 0b4bb1d4-4e5a-0410-9cc4-b2b747904278
foswiki · Nov 4, 2012 · 9ae49f7 · 9ae49f7
1 parent b14c283
commit 9ae49f7
Show file tree

Hide file tree

Showing 11 changed files with 154 additions and 125 deletions.
diff --git a/core/lib/Foswiki/Configure/resources/foswiki-configure-logo.png b/core/lib/Foswiki/Configure/resources/foswiki-configure-logo.png
diff --git a/core/lib/Foswiki/Configure/resources/pattern.css b/core/lib/Foswiki/Configure/resources/pattern.css
@@ -394,7 +394,7 @@ table {
 
 html body {
 	font-family: Arial, sans-serif;
-	font-size: 14px;
+	font-size: 13.5px;
 }
 body {
 	line-height: 22px;
@@ -1263,7 +1263,7 @@ pre ul:last-child,
   font-family: sans-serif;
   font-weight: normal;
   font-style: normal;
-  font-size: 14px;
+  font-size: 13.5px;
   text-decoration: none;
 }
 .foswikiButton:first-child,
@@ -1451,7 +1451,7 @@ pre ul:last-child,
   font-family: sans-serif;
   font-weight: normal;
   font-style: normal;
-  font-size: 14px;
+  font-size: 13.5px;
   text-decoration: none;
 }
 .foswikiSubmit:first-child {
@@ -1551,7 +1551,7 @@ pre ul:last-child,
   font-family: sans-serif;
   font-weight: normal;
   font-style: normal;
-  font-size: 14px;
+  font-size: 13.5px;
   text-decoration: none;
 }
 .foswikiButtonCancel:first-child {
@@ -1652,7 +1652,7 @@ pre ul:last-child,
   font-family: sans-serif;
   font-weight: normal;
   font-style: normal;
-  font-size: 14px;
+  font-size: 13.5px;
   text-decoration: none;
 }
 .foswikiButtonDisabled:first-child,
@@ -2045,7 +2045,7 @@ textarea.foswikiTextareaRawView:focus {
   font-family: sans-serif;
   font-weight: normal;
   font-style: normal;
-  font-size: 14px;
+  font-size: 13.5px;
   text-decoration: none;
   margin: 0 0 6px 6px;
 }
@@ -2738,7 +2738,7 @@ li.patternLogIn {
 	background-image:url(popup.gif);
 	background-repeat:no-repeat;
 	background-position:right;
-	padding-right:14px;
+	padding-right:13.5px;
 	margin-right:3px;
 }
 
@@ -3980,8 +3980,8 @@ label.ui-button.ui-state-active,
   zoom: 1;
 }
 .ui-dialog .ui-resizable-se {
-  width: 14px;
-  height: 14px;
+  width: 13.5px;
+  height: 13.5px;
   right: 3px;
   bottom: 3px;
 }
@@ -4630,7 +4630,7 @@ a.jqButton {
   font-family: sans-serif;
   font-weight: normal;
   font-style: normal;
-  font-size: 14px;
+  font-size: 13.5px;
   text-decoration: none;
 }
 .jqButton:first-child,
@@ -4755,7 +4755,7 @@ a.jqButton.foswikiButtonCancel,
   font-family: sans-serif;
   font-weight: normal;
   font-style: normal;
-  font-size: 14px;
+  font-size: 13.5px;
   text-decoration: none;
 }
 a.jqButton.foswikiButtonCancel:first-child,

diff --git a/core/lib/Foswiki/Configure/resources/scripts.js b/core/lib/Foswiki/Configure/resources/scripts.js
@@ -706,7 +706,17 @@ $(document).ready(function () {
         });
     });
 
-    $('.makeSticky').sticky();
+    // make sticky
+    $('.navigation').affix({
+      offset: {
+        top: 0
+      , bottom: 50
+      }
+    });
+
+    $(".extensionsHelp").click(function() {
+        $(".configureExtensionsHelp").toggleClass("foswikiHidden");
+    });
 
     configure.toggleExpertsMode('expert');
     configure.toggleInfoMode();

diff --git a/core/lib/Foswiki/Configure/resources/styles.css b/core/lib/Foswiki/Configure/resources/styles.css
@@ -12,21 +12,38 @@ html {
 body {
 	margin: 0;
 	padding: 0;
+	position: relative;
+}
+.foswikiCheckbox,
+.foswikiRadioButton {
+	margin:1px .25em 1px .1em;
+	padding:0 0 0 .5em;
+	border:0;
 }
 .section {
-    padding: 0 40px;
+    padding: 0 30px;
 }
 
 .configurePageHeader {
+    position: fixed;
+    z-index: 1;
+    width: 100%;
+    background: #fff;
+    border-bottom: 1px solid #eee;
+
 }
-/*
-div.configurePageBodyWrapper {
-    padding-top: 110px;
+.configurePageHeader .section {
+    padding-top: .5em;
+    padding-bottom: .5em;
 }
-*/
+.configurePageBodyWrapper {
+    padding: 65px 0 50px 0;
+}
+
 html body {
     background-color:#fff;
     font-size: 13px;
+    line-height: 18px;
 }
 
 h4, h5, h6,
@@ -52,8 +69,6 @@ h4, h5, h6,
 
 .configureMainContents {
 	background:#fff;
-	padding-top: 1em;
-	padding-bottom: 1em;
 }
 .configureRootSection {
 	padding:0 0 1em 1em;
@@ -190,7 +205,7 @@ div.configureFeedbackError H1 {
   font-family: sans-serif;
   font-weight: normal;
   font-style: normal;
-  font-size: 14px;
+  font-size: 13.5px;
   text-decoration: none;
 }
 .configureFeedbackButton1:first-child {
@@ -208,7 +223,7 @@ div.configureFeedbackError H1 {
 .configureFeedbackButton1:link,
 .configureFeedbackButton1:visited {
   color: #ffffff;
-  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
   background-color: #fab834;
   background-image: -moz-linear-gradient(top, #fbbc3e, #fab325);
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbbc3e), to(#fab325));
@@ -238,7 +253,7 @@ div.configureFeedbackError H1 {
 .configureFeedbackButton1:hover,
 .configureFeedbackButton1:active {
   color: #ffffff;
-  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
   background-color: #fab01b;
   background-image: -moz-linear-gradient(top, #fab325, #f9aa0c);
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fab325), to(#f9aa0c));
@@ -290,7 +305,7 @@ div.configureFeedbackError H1 {
   font-family: sans-serif;
   font-weight: normal;
   font-style: normal;
-  font-size: 14px;
+  font-size: 13.5px;
   text-decoration: none;
 }
 .configureFeedbackButton2:first-child {
@@ -308,7 +323,7 @@ div.configureFeedbackError H1 {
 .configureFeedbackButton2:link,
 .configureFeedbackButton2:visited {
   color: #ffffff;
-  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
   background-color: #fa7a34;
   background-image: -moz-linear-gradient(top, #fb803e, #fa7025);
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fb803e), to(#fa7025));
@@ -338,7 +353,7 @@ div.configureFeedbackError H1 {
 .configureFeedbackButton2:hover,
 .configureFeedbackButton2:active {
   color: #ffffff;
-  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
   background-color: #fa691b;
   background-image: -moz-linear-gradient(top, #fa7025, #f9600c);
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fa7025), to(#f9600c));
@@ -371,11 +386,26 @@ div.configureFeedbackError H1 {
 /* --- MENUS --- */
 
 /* PRIMARY NAVIGATION */
+.yui-b {
+    position: relative;
+}
+.navigation {
+    width: 230px;
+}
+.navigation.affix {
+    position: fixed;
+	width: 230px;
+}
+.navigation.affix-bottom {
+    position: fixed;
+    top: auto;
+    bottom: 40px;
+}
 ul.configureRootTab {
 	list-style-type:none;
 	margin:0;
-	padding:0 20px 0 0;
-	width: auto;
+	padding:0;
+	width: 100%;
 }
 ul.configureRootTab li {
 	margin:0;
@@ -701,9 +731,12 @@ table.configureExtensionsTable tr.configurePseudoInstalled td.action {
 }
 .configureExtensionsInstallControls {
     background: #EDF5FC;
-    padding: 10px 10px 15px 10px;
+    padding: 15px;
     margin: 0 0 20px 0;
 }
+.configureExtensionsInstallControls h3 {
+    color: #333;
+}
 .configureExtensionsInstallControls input[type="submit"],
 .configureExtensionsInstallControls select {
     width: 100%;
@@ -712,12 +745,20 @@ table.configureExtensionsTable tr.configurePseudoInstalled td.action {
     margin: 10px -10px;
 }
 .configureExtensionsHelp {
-    padding: 10px 10px 15px 10px;
-    margin: 0 0 20px 0;
+    padding: 20px;
+    margin: 10px 0;
+    background: #DEEFFA;
+}
+.configureExtensionsHelp p {
+    margin-top: 0;
 }
+
 .configureExtensionsHelp hr {
     margin: 10px -10px;
 }
+.configureExtensionsControls {
+    margin: 0 0 10px 0;
+}
 
 /* --- EXPERT ---*/
 
@@ -771,8 +812,7 @@ span.configureMandatory {
 }
 
 .configureLogo {
-	margin: .75em 0 1.5em 0;
-	height: 40px;
+	height: 35px;
 }
 .configureChangeList {;
 	margin:1em 0 2em 0;
@@ -939,19 +979,6 @@ div.configureMessageBox {
 	margin:1em 0;
 }
 
-.sticky {
-    position: fixed;
-    width: 100%;
-    z-index: 1;
-    -webkit-box-shadow: 0px 2px 4px rgba(50, 50, 50, 0.35);
-    -moz-box-shadow:    0px 2px 4px rgba(50, 50, 50, 0.35);
-    box-shadow:         0px 2px 4px rgba(50, 50, 50, 0.35);
-}
-.configureExtensionsInstallControls.sticky {
-    width: auto;
-    right: 0;
-}
-
 /* Responsive: Tablet to desktop */
 
 @media (min-width: 481px) and (max-width: 979px) {

diff --git a/core/lib/Foswiki/Configure/resources/welcome.html b/core/lib/Foswiki/Configure/resources/welcome.html
@@ -1,6 +1,4 @@
 %MESSAGES%
-%INCLUDE{legend.html}%
-
 <h3>Is this your first visit to Configure?</h3>
 <p>
 First thing you need to do is set the paths to your installation.<br/>
@@ -10,9 +8,9 @@ <h3>Is this your first visit to Configure?</h3>
 	<li>save and come back here to complete your installation</li>
 
 </ol>
-<h3>Did you save settings before?</h3>
+<h3>Not your first time?</h3>
 <p>
-It looks like something went wrong. Possibly the file <code>lib/LocalSite.cfg</code> could not be read.</p>
+If you did save settings before, something went wrong. Possibly the file <code>lib/LocalSite.cfg</code> could not be read.</p>
 <p>Please continue with <a href='http://foswiki.org/System/InstallationGuide#Troubleshooting'>Troubleshooting your installation.</a>
 </p>
 <div class="foswikiClear"></div>

diff --git a/core/lib/Foswiki/Configure/templates/authorize.tmpl b/core/lib/Foswiki/Configure/templates/authorize.tmpl
@@ -49,7 +49,7 @@
 		<div class='foswikiFormStep'>
 			<h2>In order to proceed, Configure requires that you type your password.</h2>
             <hr />
-            <p><input type="password" name='cfgAccess' size='30' maxlength='80' class='foswikiInputField foswikiFocus' placeholder='Your password' /><input type="submit" class='foswikiSubmit' value='Enter Configure' /></p>
+            <p><input type="password" name='cfgAccess' size='30' maxlength='80' class='foswikiInputField foswikiFocus' placeholder='Your password' /><input type="submit" class='foswikiSubmit' value='Continue' /></p>
             ${localNotePasswordForgotten}
             <hr />
             <p><input type="submit" class='foswikiButton' name='changePassword' value='Change password...' /></p>   
@@ -157,7 +157,7 @@
 <#assign localNoUpdate>
 <h2>Nothing to do - you haven't made any changes yet</h2>
 
-<p><input type="submit" class='foswikiButton' value="Make more changes" onclick="return setSubmitAction(this);" /></p>
+<p><input type="submit" class='foswikiButton' value="Back to main screen" onclick="return setSubmitAction(this);" /></p>
 </#assign>
 
 <#assign extRemove>