Mercurial > gemma
changeset 120:be2631b0ce7e
Merged.
| author | Sascha L. Teichmann <sascha.teichmann@intevation.de> |
|---|---|
| date | Tue, 26 Jun 2018 18:29:46 +0200 |
| parents | 29e56c342c9f (current diff) b68cdc620908 (diff) |
| children | 9a5bbe9c593c |
| files | client/src/assets/login.scss client/src/views/Map.jsx |
| diffstat | 6 files changed, 160 insertions(+), 123 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/assets/login.scss Tue Jun 26 18:29:26 2018 +0200 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,66 +0,0 @@ -@import "../assets/application.scss"; -$logincollapsed: 470px; -$loginextended: 550px; - -.emailgroup { - box-shadow: $basic-shadow-light !important; -} -.forgottenlink { - text-align: right; - margin-top: $small-offset; - margin-bottom: $small-offset; -} -#inputPassword { - border-right: none; -} -.input-group-text { - background-color: white !important; -} - -.login { - width: 375px; - @extend %fully-centered; - padding-top: $offset; - padding-bottom: $offset; - box-shadow: $basic-shadow; -} -.logincollapsed { - height: $logincollapsed; -} - -.loginextended { - height: $loginextended; -} -.loginerror { - white-space: pre; -} -.loginerrormessage { - box-shadow: $basic-shadow-light !important; -} -.loginform { - width: 300px; -} -.logogroup { - margin-top: $offset; - margin-bottom: $offset; -} -.mail-icon { - width: $iconwidth; -} -.passwordgroup { - box-shadow: $basic-shadow-light !important; -} -.password-icon { - position: relative; - top: 10px; - font-size: $iconsize; - line-height: $iconLineHeight; - width: $iconwidth; -} -.submitbutton { - box-shadow: $basic-shadow-light !important; - line-height: 20px !important; -} -.title { - margin-left: $offset; -}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/components/Map.jsx Tue Jun 26 18:29:46 2018 +0200 @@ -0,0 +1,35 @@ +/*eslint no-unused-vars: ["error", { "args": "none" }]*/ +import ol_Map from "ol/map"; +import ol_layer_Tile from "ol/layer/tile"; +import ol_source_OSM from "ol/source/osm"; +import ol_View from "ol/view"; + +export default { + render(h) { + return <div id="map" />; + }, + data() { + return { + lat: 52.278889, + long: 8.043056, + zoom: 12, + projection: "EPSG:4326" + }; + }, + mounted() { + console.log(this.centerX); + new ol_Map({ + layers: [ + new ol_layer_Tile({ + source: new ol_source_OSM() + }) + ], + target: "map", + view: new ol_View({ + center: [this.long, this.lat], + zoom: this.zoom, + projection: this.projection + }) + }); + } +};
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/components/Sidebar.vue Tue Jun 26 18:29:46 2018 +0200 @@ -0,0 +1,49 @@ +<template> + <div class="sidebar"> + <nav class="nav flex-column"> + <a class="nav-link active" href="#">Active</a> + <a class="nav-link" href="#">Link</a> + <a class="nav-link" href="#">Link</a> + <a class="nav-link disabled" href="#">Disabled</a> + </nav> + </div> +</template> + +<script> +export default { + name: "sidebar", + computed: { + sidebarStyle() { + return { + sidebarcollapsed: this.collapsed, + sidebarextended: this.collapsed + }; + } + }, + data() { + return { + collapsed: false + }; + } +}; +</script> + +<style lang="scss"> +@import "../assets/application.scss"; + +$sidebar-full-width: 150px; + +$sidebar-collapsed-width: 80px; + +.sidebar { + padding-top: $large-offset; +} + +.sidebarcollapsed { + width: $sidebar-collapsed-width; +} + +.sidebarextended { + width: $sidebar-full-width; +} +</style>
--- a/client/src/views/Login.vue Tue Jun 26 18:29:26 2018 +0200 +++ b/client/src/views/Login.vue Tue Jun 26 18:29:46 2018 +0200 @@ -12,22 +12,17 @@ <span class="loginerror">{{ loginAttemptFailed }}</span> </div> <div class="input-group mb-3 emailgroup"> - <div class="input-group-prepend"> - <span class="input-group-text"><i class="fa fa-envelope-open-o mail-icon"></i></span> - </div> <input type="text" v-model="username" id="inputEmail" class="form-control" :placeholder="emailLabel" required autofocus> </div> <div class="input-group mb-3 passwordgroup"> - <div class="input-group-prepend"> - <span class="input-group-text"><span class="password-icon">*</span></span> - </div> + <input :type="isPasswordVisible" v-model="password" id="inputPassword" class="form-control" :placeholder="passwordLabel" required> <div class="input-group-append"> <span class="input-group-text" id="basic-addon2" @click="showPassword"><i class="fa fa-eye"></i></span> </div> </div> - <button class="submitbutton btn btn-lg btn-primary btn-block" :disabled="submitted" type="submit">{{ loginButtonLabel }}</button> - <div class="forgottenlink"><a href="#">{{ passPhraseForgotten }}</a></div> + <button class="submitbutton btn btn-primary btn-block" :disabled="submitted" type="submit">{{ loginButtonLabel }}</button> + <div class="forgottenlink small"><a href="#">{{ passPhraseForgotten }}</a></div> <div class="secondary-logo"><img :src="secondaryLogo"></div> </form> </div> @@ -35,7 +30,71 @@ </template> <style lang="scss"> -@import "../assets/login.scss"; +@import "../assets/application.scss"; +$logincollapsed: 470px; +$loginextended: 550px; + +.emailgroup { + box-shadow: $basic-shadow-light !important; +} +.forgottenlink { + text-align: right; + margin-top: $small-offset; + margin-bottom: $small-offset; +} +#inputPassword { + border-right: none; +} +.input-group-text { + background-color: white !important; +} + +.login { + width: 375px; + @extend %fully-centered; + padding-top: $offset; + padding-bottom: $offset; + box-shadow: $basic-shadow; +} +.logincollapsed { + height: $logincollapsed; +} + +.loginextended { + height: $loginextended; +} +.loginerror { + white-space: pre; +} +.loginerrormessage { + box-shadow: $basic-shadow-light !important; +} +.loginform { + width: 300px; +} +.logogroup { + margin-top: $offset; + margin-bottom: $offset; +} +.mail-icon { + width: $iconwidth; +} +.passwordgroup { + box-shadow: $basic-shadow-light !important; +} +.password-icon { + position: relative; + top: 10px; + font-size: $iconsize; + line-height: $iconLineHeight; + width: $iconwidth; +} +.submitbutton { + box-shadow: $basic-shadow-light !important; +} +.title { + margin-left: $offset; +} </style> <script> @@ -53,10 +112,10 @@ }; }, computed: { - isPasswordVisible: function() { + isPasswordVisible() { return this.readablePassword ? "text" : "password"; }, - loginStyle: function() { + loginStyle() { return { login: true, logincollapsed: !this.loginFailed,
--- a/client/src/views/Main.vue Tue Jun 26 18:29:26 2018 +0200 +++ b/client/src/views/Main.vue Tue Jun 26 18:29:46 2018 +0200 @@ -1,22 +1,15 @@ <template> <div class="main d-flex"> - <div class="sidebar">Sidebar!</div> + <Sidebar></Sidebar> <Map></Map> </div> </template> <style lang="scss"> -@import "../assets/application.scss"; -$sidebar-full-width: 150px; -$sidebar-collapsed-width: 80px; - .main { height: 100vh; } -.sidebar { - padding-top: $large-offset; - width: $sidebar-full-width; -} + #map { background-color: #ffffff; width: 100%; @@ -24,11 +17,13 @@ </style> <script> -import Map from "./Map"; +import Map from "../components/Map"; +import Sidebar from "../components/Sidebar"; export default { name: "mainview", components: { - Map + Map, + Sidebar } }; </script>
--- a/client/src/views/Map.jsx Tue Jun 26 18:29:26 2018 +0200 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,35 +0,0 @@ -/*eslint no-unused-vars: ["error", { "args": "none" }]*/ -import ol_Map from "ol/map"; -import ol_layer_Tile from "ol/layer/tile"; -import ol_source_OSM from "ol/source/osm"; -import ol_View from "ol/view"; - -export default { - render(h) { - return <div id="map" />; - }, - data() { - return { - lat: 52.278889, - long: 8.043056, - zoom: 12, - projection: "EPSG:4326" - }; - }, - mounted() { - console.log(this.centerX); - new ol_Map({ - layers: [ - new ol_layer_Tile({ - source: new ol_source_OSM() - }) - ], - target: "map", - view: new ol_View({ - center: [this.long, this.lat], - zoom: this.zoom, - projection: this.projection - }) - }); - } -};