Browse Source

Remove left window
Bring appearance to the right window
Move exits to the center window, close to the room description

Reddo 5 years ago
parent
commit
783cd43d0b
4 changed files with 52 additions and 33 deletions
  1. 24 19
      The Obelisk.haml
  2. 1 1
      sass/_mainMenu.scss
  3. 26 11
      sass/_page.scss
  4. 1 2
      sass/text/_say.scss

+ 24 - 19
The Obelisk.haml

@@ -48,9 +48,6 @@
           #sceneAnimation
           #leftWindow
             .topBottomFlex
-              #appearanceTab.noshrinkFlex.scrollbar
-                %p.appearanceHeader="Appearance:"
-                #appearanceTarget
               .growingFlex
               #inventoryTab.noshrinkFlex.scrollbar
                 -#inventoryTab.noshrinkFlex
@@ -63,29 +60,37 @@
                   #forceTurnToBottom.growingFlex
                   #currentTurnTab.noshrinkFlex
                   #forceTurnToTop.growingFlex
-              #currentRoomTab.noshrinkFlex
-                %p.roomName#roomName
-                #roomDescription
-              #hyperlinksTab.noshrinkFlex
-                #commonActionsTab
-                #linkTarget
-                #linkActions
-              #fakeparserTab.noshrinkFlex
-                %a#currentCommand>
-                %a#fakeParserThingy="_"
+              #bottomNoTurn.noshrinkFlex
+                .leftRightFlex
+                  .growingFlex
+                    #leftBottom.topBottomFlex
+                      #currentRoomTab.noshrinkFlex
+                        %p.roomName#roomName
+                        #roomDescription
+                      #hyperlinksTab.noshrinkFlex
+                        #commonActionsTab
+                        #linkTarget
+                        #linkActions
+                      #fakeparserTab.noshrinkFlex
+                        %a#currentCommand>
+                        %a#fakeParserThingy="_"
+                  #roomExitsHolder
+                    %p.roomExitsHeader="Exits:"
+                    #roomExits
           #rightWindow
             .topBottomFlex
-              #mapTab.growingFlex.scrollbar
+              .growingFlex
+              #mapTab.noshrinkFlex.scrollbar
                 #mapTarget
-              #roomExitsHolder
-                %p.roomExitsHeader="Exits:"
-                #roomExits
+              #appearanceTab.noshrinkFlex.scrollbar
+                %p.appearanceHeader="Appearance:"
+                #appearanceTarget
     -###########
     -# Relative File for Debugging
-    -#%script{:type => "text/javascript", :charset=>"utf8", :src => "../js/Application.js"}
+    %script{:type => "text/javascript", :charset=>"utf8", :src => "../js/Application.js"}
     -###########
     -# Optimized No Debug Data URL
-    = "<script id=\"ApplicationJS\" type=\"text/javascript\", charset=\"utf8\", src=\"data:application/javascript," + (URI.encode("(function(){\n" + (File.read "js/Application.js").encode!('UTF-8', 'UTF-8', :invalid => :replace).gsub("console.debug(", "//")) + "\n})()") + "\"></script>";
+    -#= "<script id=\"ApplicationJS\" type=\"text/javascript\", charset=\"utf8\", src=\"data:application/javascript," + (URI.encode("(function(){\n" + (File.read "js/Application.js").encode!('UTF-8', 'UTF-8', :invalid => :replace).gsub("console.debug(", "//")) + "\n})()") + "\"></script>";
     -###########
     %style{:media=>"screen", :type=>"text/css"}
       = File.read "stylesheets/fonts.css"

+ 1 - 1
sass/_mainMenu.scss

@@ -3,7 +3,7 @@
 }
 
 #mainPage.mainmenu  {
-  & #statusLine , #statusLine , #rightWindow , #currentRoomTab , #fakeparserTab , #hyperlinksTab, #leftWindow{
+  & #statusLine , #statusLine , #rightWindow , #currentRoomTab , #fakeparserTab , #hyperlinksTab, #leftWindow, #bottomNoTurn{
     display: none;
   }
 

+ 26 - 11
sass/_page.scss

@@ -133,8 +133,12 @@ body {
   background-color: #fff;
 }
 
+#leftWindow {
+  display: none;
+}
+
 #centerWindow {
-  max-width: 60%;
+  max-width: 75%;
   flex: 1 1 auto;
   flex-grow: 4;
 }
@@ -166,8 +170,8 @@ body {
   to   { opacity: 1; }
 }
 
-#leftWindow {
-  background: linear-gradient(to right, rgba(0,0,0, $dark1) 0%, rgba(0,0,0, $dark2) 50%,rgba(0,0,0, $dark3) 100%);
+#rightWindow {
+  background: linear-gradient(to bottom left, rgba(0,0,0, $dark1) 0%, rgba(0,0,0, $dark2) 50%,rgba(0,0,0, $dark3) 100%);
 }
 
 #appearanceTab {
@@ -180,18 +184,19 @@ body {
 #inventoryTab {
   overflow-y: auto;
   flex-shrink: 1;
+  min-height: 12rem;
   //overflow: hidden;
   //background: linear-gradient(to left, rgba(0,0,0, $dark1) 0%, rgba(0,0,0, $dark2) 50%,rgba(0,0,0, $dark3) 100%);
 }
 
 #currentRoomTab {
   overflow: hidden;
-  background: linear-gradient(to bottom, rgba(0,0,0, $dark3) 75%,rgba(0,0,0, $dark4) 100%);
+  //background: linear-gradient(to bottom, rgba(0,0,0, $dark3) 75%,rgba(0,0,0, $dark4) 100%);
   padding: 0.8rem;
 }
 
 #hyperlinksTab {
-  background: rgba(0,0,0, $dark4);
+  //background: rgba(0,0,0, $dark4);
   text-indent: 1em;
 }
 
@@ -201,7 +206,7 @@ body {
 
 #fakeparserTab {
   overflow: visible;
-  background: rgba(0,0,0, $dark4);
+  //background: rgba(0,0,0, $dark4);
   padding: 0.8rem;
   font-family: $fixedWidthFont;
 
@@ -222,20 +227,30 @@ body {
 
 #rememberedRoomsTab, #mapTab {
   overflow-y: auto;
-  background: linear-gradient(to bottom left, rgba(0,0,0, $dark1) 0%, rgba(0,0,0, $dark2) 50%,rgba(0,0,0, $dark3) 100%);
+  //background: linear-gradient(to bottom left, rgba(0,0,0, $dark1) 0%, rgba(0,0,0, $dark2) 50%,rgba(0,0,0, $dark3) 100%);
   padding: 0.8rem;
+  position: relative;
 }
 
 // #mainPage.mobile
 #roomExitsHolder {
   @extend .noshrinkFlex;
-  background: linear-gradient(to top left, rgba(0,0,0, $dark1) 0%, rgba(0,0,0, $dark2) 50%,rgba(0,0,0, $dark3) 100%);
-  padding: 2ex;
-  padding-top: 0px;
+  width: 30%;
+  //background: linear-gradient(to top left, rgba(0,0,0, $dark1) 0%, rgba(0,0,0, $dark2) 50%,rgba(0,0,0, $dark3) 100%);
+  padding: 0px 2ex;
 }
 
 #exitsTab {
   overflow: hidden;
-  background-color: rgba(0,0,0, $dark4);
+  //background-color: rgba(0,0,0, $dark4);
   padding: 0.8rem;
 }
+
+
+#leftBottom {
+  position: relative;
+}
+
+#bottomNoTurn {
+  background: linear-gradient(to bottom, rgba(0,0,0, $dark3) 75%,rgba(0,0,0, $dark4) 100%);
+}

+ 1 - 2
sass/text/_say.scss

@@ -74,8 +74,7 @@ p.choice {
   &.small {
     display: inline-block;
     padding-right: 1rem;
-    margin: 0px;
-    margin-right: 0.5rem;
+    margin-right: 0.25rem;
   }
 }