Modify top-level styles to align scoreboard to bottom

4 years ago · 3b1c834bab
parent 893751ac38
commit 3b1c834bab
2 changed files with 23 additions and 3 deletions
--- a/index.html
+++ b/index.html
@ -7,11 +7,12 @@
        <link rel="stylesheet" href="./src/style/components.css">
    </head>
    <body>
-        <h1>Battleship - EECS 448 Project 1</h1>
-        <p>Created by Lucas Brakenridge, Javier Barea Lara, Garrett Mills, Evan Powell, and Alec Horlick-Mills</p>
-
        <!-- This is the container where the Vue.js application will render to. -->
        <div id="wrapper">
+            <div class="header">
+                <h1>Battleship - EECS 448 Project 1</h1>
+                <p>Created by Lucas Brakenridge, Javier Barea Lara, Garrett Mills, Evan Powell, and Alec Horlick-Mills</p>
+            </div>

            <!-- The top level component. This controls showing/hiding grids &c. -->
            <app-top-level></app-top-level>
--- a/src/style/components.css
+++ b/src/style/components.css
@ -1,3 +1,21 @@
+#wrapper {
+    height: 100%;
+    width: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    overflow: hidden;
+    overflow-y: scroll;
+    display: flex;
+    flex-direction: column;
+}
+
+.top-level-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
 /* Styles for top-level component */
 .top-level-component .game-boards-container {
    display: flex;
@ -96,6 +114,7 @@ p {
    align-items: center;
    justify-content: center;
    flex-direction: column;
+    flex: 1;
 }

 .top-level-component .instructions {