FUNCT Add bootstrap support

4 files changed, 13 insertions, 183 deletions

diff --git a/src/styles/app.scss b/src/styles/app.scss
index c69ad19..d7290f4 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -5,8 +5,15 @@ $colors: (
   grey:             #848286
 );
 
-@import "style.css";
+
+$body-bg: transparent;
+$body-color: #FFFFFF;
+$list-group-bg: transparent;
+$font-size-base: 1.5rem;
+
+@import "~bootstrap/scss/bootstrap";
 @import "main.scss";
 @import "portrait.scss";
 @import "landscape.scss";
-@import "~@fortawesome/fontawesome-free/css/all.min.css";
\ No newline at end of file
+@import "~@fortawesome/fontawesome-free/css/all.min.css";
+
diff --git a/src/styles/landscape.scss b/src/styles/landscape.scss
index 4742273..b7e1bf7 100644
--- a/src/styles/landscape.scss
+++ b/src/styles/landscape.scss
@@ -3,18 +3,4 @@
     html {
         background-image: url('../images/horizontal_background.png');
     }
-
-    body {
-
-        .center {
-            width: 80%;
-            float: left;
-        }
-
-        .bottom {
-            flex-direction: column;
-            width: 20%;
-        }
-
-    }
 }
\ No newline at end of file
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 84d877c..626d127 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -17,167 +17,10 @@ html {
 }
 
 body {
-    font-size: 2rem;
-    font-family: Arial;
-    color: map-get($colors, font);
-    margin: 0 5%;
-    height: 100%;
-
-    a {
-        color: map-get($colors, font);
-        text-decoration: none;
-    }
-
-    .button {
-        &[value="true"] {
-            color: map-get($colors, primary);
-            .disabled {
-                display: none;
-            }
-            .enabled {
-                display: block;
-            }
-        }
-        &[value="false"] {
-            color: map-get($colors, grey);
-            .disabled {
-                display: block;
-            }
-            .enabled {
-                display: none;
-            }
-        }
-    }
-
-    .page {
-        flex-direction: column;
-        flex-wrap: nowrap;
-        justify-content: center;
-        height: 100%;
-        overflow: hidden;
-        position: relative;
-
-        &.hide {
-            display: none;
-        }
-
-        .header {
-            text-align: left;
-            margin: 50px 0;
-
-            .backButton {
-                padding-right: 20px;
-                font-size: 1em;
-            }
-        }
-
-        .container {
-            overflow-y: scroll;
-            height: 1040px;
-
-            .entry {
-                $entryHeight: 120px;
-                height: $entryHeight;
-                line-height: $entryHeight;
-                border-bottom: 9 solid map-get($colors, grey);
-
-                &:nth-last-child(1) {
-                    margin-bottom: 90px;
-                }
-
-                &.secondary {
-                    $entryHeight: 90px;
-                }
-
-                &:last-child {
-                    border-bottom: none;
-                }
-
-                .icon {
-                    width: 10%;
-                    height: $entryHeight;
-                    position: relative;
-                    float: left;
-                    text-align: center;
-                }
-
-                .label {
-                    position: relative;
-                    float: left;
-                    text-align: left;
-                    width: 75%;
-                    height: $entryHeight;
-                    white-space: nowrap;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-
-                    .title {
-                        height: 2*$entryHeight/3;
-                        line-height: 2*$entryHeight/3;
-                    }
-                    .subtitle {
-                        height: $entryHeight/3;
-                        line-height: $entryHeight/3;
-                        font-size: 0.75em;
-                    }
-                }
-
-                .control {
-                    width: 15%;
-                    position: relative;
-                    float: left;
-                    text-align: right;
-                    height: $entryHeight;
-
-                    & > * {
-                        height: $entryHeight;
-                        line-height: $entryHeight;
-                    }
-
-                    &.enabled {
-                        .on {
-                            display: block;
-                            color: map-get($colors, primary);
-                        }
-
-                        .off {
-                            display: none;
-                        }
-                    }
-
-                    .on {
-                        display: none;
-                    }
-
-                    .off {
-                        display: block;
-                    }
-                }
-            }
-        }
-
-        .footer {            
-            position: absolute;
-            bottom: 0;
-            text-align: center;
-            height: 80px;
-            line-height: 80px;
-            width: 100%;
-            display: flex;
-            flex-direction: row;
-            flex-wrap: nowrap;
-            justify-content: space-evenly;
-            align-content: stretch;
-
-            .button {
-                flex-grow: 1;
-                background: map-get($colors, secondary);
-
-                &.active {
-                    background: map-get($colors, primary);
-                }
-            }
-        }
+    
+    .list-group.scrollable {
+        height: 720px;
+        overflow: scroll;
     }
 
     .log {
diff --git a/src/styles/portrait.scss b/src/styles/portrait.scss
index 4016600..f8db5e4 100644
--- a/src/styles/portrait.scss
+++ b/src/styles/portrait.scss
@@ -7,10 +7,4 @@
         background-color: transparent;
         height: 992px;
     }
-
-    body {
-        .center {
-            width: 100%;
-        }
-    }
 }
\ No newline at end of file