Mercurial > gemma
changeset 117:5e95c62a7e74
Move component. Re-add Css.
Move components to separate folders.
Re-adding login css to appropriate component
(=undoing ae6535d44563) according to vue style.
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Tue, 26 Jun 2018 17:26:34 +0200 |
parents | dad6cf39691e |
children | b68cdc620908 |
files | client/src/components/Map.jsx client/src/components/Sidebar.vue client/src/views/Login.vue client/src/views/Main.vue |
diffstat | 4 files changed, 160 insertions(+), 22 deletions(-) [+] |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/components/Map.jsx Tue Jun 26 17:26:34 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 17:26:34 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 16:40:44 2018 +0200 +++ b/client/src/views/Login.vue Tue Jun 26 17:26:34 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 16:40:44 2018 +0200 +++ b/client/src/views/Main.vue Tue Jun 26 17:26:34 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>