Egalware/cms_thermo_active
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

login form e less

Browse Source
This commit is contained in:
Paolo Possanzini
2017-11-16 12:48:01 +01:00
parent dd75527af1
commit a4b47ddd18
18 changed files with 358 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Step/Step.csproj
-33
View File
@@ -134,17 +134,9 @@
<Content Include=".bowerrc">
<DependentUpon>bower.json</DependentUpon>
</Content>
<Content Include="client\assets\styles\style.css" />
<Content Include="client\dist\build.js" />
<Content Include="client\dist\logo.png" />
<Content Include="favicon.ico" />
<Content Include="Global.asax" />
<Content Include="index.html" />
<Content Include="client\assets\styles\style.less" />
<Content Include="client\assets\styles\base\layout.less" />
<Content Include="client\assets\styles\base\colors.less" />
<Content Include="client\assets\styles\base\modals.less" />
<Content Include="client\assets\styles\base\grid-system.less" />
<None Include="Scripts\jquery-3.2.1.intellisense.js" />
<Content Include="Scripts\jquery-3.2.1.js" />
<Content Include="Scripts\jquery-3.2.1.min.js" />
@@ -152,11 +144,6 @@
<Content Include="Scripts\jquery-3.2.1.slim.min.js" />
<Content Include="Scripts\jquery.signalR-2.2.2.js" />
<Content Include="Scripts\jquery.signalR-2.2.2.min.js" />
<Content Include="client\src\app.routes.js" />
<Content Include="client\assets\logo.png" />
<Content Include="client\src\main.js" />
<Content Include="client\src\app.modules.js" />
<Content Include="client\src\router\index.js" />
<Content Include="Web.config" />
<Content Include="Web.Debug.config">
<DependentUpon>Web.config</DependentUpon>
@@ -168,14 +155,9 @@
</ItemGroup>
<ItemGroup>
<Folder Include="App_Data\" />
<Folder Include="client\assets\fonts\" />
<Folder Include="client\assets\images\" />
<Folder Include="client\src\%40types\" />
<Folder Include="client\src\modules\base-components\" />
<Folder Include="Provider\" />
</ItemGroup>
<ItemGroup>
<Content Include="client\.babelrc" />
<Content Include=".editorconfig" />
<Content Include="bower.json" />
<Content Include="compilerconfig.json" />
@@ -183,16 +165,8 @@
<Content Include="package.json" />
<None Include="packages.config" />
<Content Include="tsconfig.json" />
<Content Include="client\src\App.vue" />
<Content Include="client\src\components\Home.vue" />
<Content Include="Scripts\jquery-3.2.1.slim.min.map" />
<Content Include="Scripts\jquery-3.2.1.min.map" />
<TypeScriptCompile Include="client\src\services\dataService.ts" />
<TypeScriptCompile Include="client\src\_base\baseRestService.ts" />
<TypeScriptCompile Include="client\src\_base\factoryService.ts" />
<TypeScriptCompile Include="client\src\_base\filtersExtensions.ts" />
<TypeScriptCompile Include="client\src\_base\messageService.ts" />
<TypeScriptCompile Include="client\src\_base\utils.ts" />
</ItemGroup>
<ItemGroup>
<ProjectReference Include="..\Step.Model\Step.Model.csproj">
@@ -200,13 +174,6 @@
<Name>Step.Model</Name>
</ProjectReference>
</ItemGroup>
<ItemGroup>
<TypeScriptCompile Include="client\src\services\baseRestService.ts" />
<TypeScriptCompile Include="client\src\services\factoryService.ts" />
<TypeScriptCompile Include="client\src\services\filtersExtensions.ts" />
<TypeScriptCompile Include="client\src\services\messageService.ts" />
<TypeScriptCompile Include="client\src\services\utils.ts" />
</ItemGroup>
<ItemGroup>
<Service Include="{4A0DDDB5-7A95-4FBF-97CC-616D07737A77}" />
</ItemGroup>
Step/client/assets/images/persona.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

Step/client/assets/styles/base/buttons.less
+23
View File
@@ -0,0 +1,23 @@
// main: ../style.less
@import "colors.less";
@button-height: 48px;
@button-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
@button-success-color-from: #1756ad;
@button-success-color-to: #002680;
button.btn {
height: @button-height;
border-radius: 2px;
text-align: center;
font-size: 18px;
font-weight: bold;
box-shadow: @button-shadow;
padding: 0 20px;
border:none;
}
button.btn.btn-success {
background-image: linear-gradient(to bottom, @button-success-color-from, @button-success-color-to);
color: white;
}
Step/client/assets/styles/base/colors.less
+6 -3
View File
@@ -1,11 +1,14 @@
// out: false, sourceMap: false, main: ../style.less
// Shadows ;
@shadows: 0 3px 5px 0 rgba(0, 0, 0, 0.4);
@color-background-white: #fff;
@color-backdrop: rgba(217, 217, 217, 0.5);
@color-darkish-blue:#002680;
@color-darkish-blue: #002680;
@color-white: #fff;
@color-input-light: #4b4b4b;
@color-label-grey: #979797;
@color-input-background: #f8f8f8;
@color-scarlet:#d0021b;
Step/client/assets/styles/base/fonts.css → Step/client/assets/styles/base/fonts.less
+2 -2
View File
@@ -1,4 +1,4 @@
/* latin-ext */
// out: false, sourceMap: false, main: ../style.less
@font-face {
font-family: 'Work Sans';
@@ -37,4 +37,4 @@
font-weight: 700;
src: local('Work Sans Bold'), local('WorkSans-Bold'), url(/client/assets/fonts/WorkSans-Bold.woff2) format('woff2');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
}
Step/client/assets/styles/base/grid-system.less
+1 -1
View File
@@ -4,6 +4,7 @@
.@{row} {
display: flex;
width:100%;
flex-direction: row;
}
@@ -12,7 +13,6 @@
flex-direction: column;
}
.relative {
position: relative;
}
Step/client/assets/styles/base/input.less
+54
View File
@@ -0,0 +1,54 @@
// out: false, sourceMap: false, main: ../style.less
@import "colors.less";
@import "fonts.less";
@font-family: 'Work Sans', sans-serif;
@font-size:18px;
@font-size-small: 14px;
@input-height: 48px;
.form-group {
display: block;
margin-bottom: 20px;
label{
display: block;
color:@color-label-grey;
font-size: @font-size;
line-height: 1;
font-family: @font-family;
text-align: left;
margin: 13px 0;
}
input {
display: block;
border-radius: 2px;
border:solid 1px #dfdfdf;
height: @input-height;
line-height: 1.1;
font-family: @font-family;
color: @color-input-light;
font-size: @font-size;
background-color: @color-input-background;
margin: 0 0px;
padding-right: 0;
padding-left: 20px;
width: calc(~'100% - 20px');
}
input.invalid{
border-color: @color-scarlet;
}
small.error{
text-align: left;
display: block;
color: @color-scarlet;
font-size:@font-size-small;
font-family: @font-family;
line-height: 1;
padding-left: 16px;
margin: 2px 0;
}
}
Step/client/assets/styles/base/layout.less
+10 -5
View File
@@ -2,11 +2,16 @@
@import "colors.less";
@import "modals.less";
@import "grid-system.less";
@import "input.less";
@import "buttons.less";
@persona-size: 88px;
.persona{
height: @persona-size;
width: @persona-size;
border-radius: @persona-size /2;
.persona {
height: @persona-size;
width: @persona-size;
border-radius: @persona-size /2;
}
body {
font-family: 'Work Sans', sans-serif;
}
Step/client/assets/styles/base/modals.less
+1 -1
View File
@@ -1,4 +1,4 @@
// out: false, sourceMap: false, main: ../style.less
// main: ../style.less
@import "grid-system.less";
@import "colors.less";
@import "fonts.css";
Step/client/assets/styles/style.css
+132 -54
View File
@@ -2,81 +2,159 @@
@import url(../../../libs/glyphicons/styles/glyphicons.css);
@import "fonts.css";
.modal {
min-width: 500px;
height: 400px;
box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.4);
z-index: 1000;
background-color: #fff;
position: absolute;
min-width: 500px;
height: 400px;
box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.4);
z-index: 1000;
background-color: #fff;
position: absolute;
}
.modal header {
height: 64px;
line-height: 64px;
height: 64px;
line-height: 64px;
}
.modal.login {
width: 600px;
height: 560px;
top: calc(50% - 280px);
left: calc(50% - 300px);
width: 600px;
height: 560px;
top: calc(50% - 280px);
left: calc(50% - 300px);
}
.modal.login header {
background-color: #002680;
color: #fff;
font-family: 'Work Sans', sans-serif;
font-weight: 600;
font-size: 24px;
text-align: left;
padding: 0px 23px;
background-color: #002680;
color: #fff;
font-family: 'Work Sans', sans-serif;
font-weight: 600;
font-size: 24px;
text-align: left;
padding: 0px 23px;
}
.backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
-webkit-backdrop-filter: blur(10px);
background-color: rgba(217, 217, 217, 0.5);
z-index: 900;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
-webkit-backdrop-filter: blur(10px);
background-color: rgba(217, 217, 217, 0.5);
z-index: 900;
}
.row {
display: flex;
flex-direction: row;
display: flex;
width: 100%;
flex-direction: row;
}
.col {
display: flex;
flex-direction: column;
display: flex;
flex-direction: column;
}
.relative {
position: relative;
position: relative;
}
.absolute {
position: absolute;
position: absolute;
}
.full-height {
height: 100%;
height: 100%;
}
.full-width {
width: 100%;
width: 100%;
}
@font-face {
font-family: 'Work Sans';
font-style: normal;
font-weight: 400;
src: local('Work Sans'), local('WorkSans-Regular'), url(/client/assets/fonts/WorkSans-Regular.woff2) format('woff2');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin-ext */
@font-face {
font-family: 'Work Sans';
font-style: normal;
font-weight: 500;
src: local('Work Sans Medium'), local('WorkSans-Medium'), url(/client/assets/fonts/WorkSans-Medium.woff2) format('woff2');
}
/* latin-ext */
@font-face {
font-family: 'Work Sans';
font-style: normal;
font-weight: 600;
src: local('Work Sans SemiBold'), local('WorkSans-SemiBold'), url(/client/assets/fonts/WorkSans-SemiBold.woff2) format('woff2');
}
/* latin-ext */
@font-face {
font-family: 'Work Sans';
font-style: normal;
font-weight: 700;
src: local('Work Sans Bold'), local('WorkSans-Bold'), url(/client/assets/fonts/WorkSans-Bold.woff2) format('woff2');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
.form-group {
display: block;
margin-bottom: 20px;
}
.form-group label {
display: block;
color: #979797;
font-size: 18px;
line-height: 1;
font-family: 'Work Sans', sans-serif;
text-align: left;
margin: 13px 0;
}
.form-group input {
display: block;
border-radius: 2px;
border: solid 1px #dfdfdf;
height: 48px;
line-height: 1.1;
font-family: 'Work Sans', sans-serif;
color: #4b4b4b;
font-size: 18px;
background-color: #f8f8f8;
margin: 0 0px;
padding-right: 0;
padding-left: 20px;
width: calc(100% - 20px);
}
.form-group input.invalid {
border-color: #d0021b;
}
.form-group small.error {
text-align: left;
display: block;
color: #d0021b;
font-size: 14px;
font-family: 'Work Sans', sans-serif;
line-height: 1;
padding-left: 16px;
margin: 2px 0;
}
button.btn {
height: 48px;
border-radius: 2px;
text-align: center;
font-size: 18px;
font-weight: bold;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
padding: 0 20px;
border: none;
}
button.btn.btn-success {
background-image: linear-gradient(to bottom, #1756ad, #002680);
color: white;
}
.persona {
height: 88px;
width: 88px;
border-radius: 44px;
height: 88px;
width: 88px;
border-radius: 44px;
}
body {
font-family: 'Work Sans', sans-serif;
}
body {
font-family: 'Work Sans', sans-serif;
}
/*# sourceMappingURL=./style.css.map */
Step/client/assets/styles/style.css.map
+1 -1
View File
@@ -1 +1 @@
{"version":3,"sources":["base/modals.less","base/grid-system.less","base/layout.less"],"names":[],"mappings":";;QAGQ;AAiBR,CAAC;EACC,gBAAA;EACA,aAAA;EACA,0CAAA;EACA,aAAA;EACA,sBAAA;EACA,kBAAA;;AANF,CAAC,KAQC;EACE,YAAA;EACA,iBAAA;;AAIJ,CAAC,KAAQ,CAAC;EACR,YAAA;EACA,aAAA;EACA,KAAK,iBAAL;EACA,MAAM,iBAAN;;AAJF,CAAC,KAAQ,CAAC,KAMR;EACE,yBAAA;EACA,WAAA;EACA,aAnCU,uBAmCV;EACA,gBAAA;EACA,eAAA;EACA,gBAAA;EACA,iBAAA;;AAMJ,CAAC;EACC,eAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA,SAAA;EACA,YAAA;EACA,aAAA;EACA,gBAAA;EACA,yBAAyB,UAAzB;EACA,0CAAA;EACA,YAAA;;AC5DF,CAAC;EACC,aAAA;EACA,mBAAA;;AAGF,CAAC;EACC,aAAA;EACA,sBAAA;;AAIF;EACE,kBAAA;;AAGF;EACE,kBAAA;;AAGF;EACE,YAAA;;AAGF;EACE,WAAA;;ACrBF;EACE,YAAA;EACA,WAAA;EACA,mBAAA"}
{"version":3,"sources":["base/modals.less","base/input.less","base/grid-system.less","base/fonts.less","base/buttons.less","base/layout.less","style.less"],"names":[],"mappings":";;QAGQ;AAiBR,CAAC;EACC,gBAAA;EACA,aAAA;EACA,0CAAA;EACA,aAAA;EACA,sBAAA;EACA,kBAAA;;AANF,CAAC,KAQC;EACE,YAAA;EACA,iBAAA;;AAIJ,CAAC,KAAQ,CAAC;EACR,YAAA;EACA,aAAA;EACA,KAAK,iBAAL;EACA,MAAM,iBAAN;;AAJF,CAAC,KAAQ,CAAC,KAMR;EACE,yBAAA;EACA,WAAA;EACA,aCvCU,uBDuCV;EACA,gBAAA;EACA,eAAA;EACA,gBAAA;EACA,iBAAA;;AAMJ,CAAC;EACC,eAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA,SAAA;EACA,YAAA;EACA,aAAA;EACA,gBAAA;EACA,yBAAyB,UAAzB;EACA,0CAAA;EACA,YAAA;;AE5DF,CAAC;EACC,aAAA;EACA,WAAA;EACA,mBAAA;;AAGF,CAAC;EACC,aAAA;EACA,sBAAA;;AAGF;EACE,kBAAA;;AAGF;EACE,kBAAA;;AAGF;EACE,YAAA;;AAGF;EACE,WAAA;;AC1BF;EACI,aAAa,WAAb;EACA,kBAAA;EACA,gBAAA;EACA,KAAK,MAAM,cAAc,MAAM,sEAAsE,OAAO,QAA5G;EACA,2FAAA;;;AAMJ;EACI,aAAa,WAAb;EACA,kBAAA;EACA,gBAAA;EACA,KAAK,MAAM,qBAAqB,MAAM,oEAAoE,OAAO,QAAjH;;;AAMJ;EACI,aAAa,WAAb;EACA,kBAAA;EACA,gBAAA;EACA,KAAK,MAAM,uBAAuB,MAAM,wEAAwE,OAAO,QAAvH;;;AAMJ;EACI,aAAa,WAAb;EACA,kBAAA;EACA,gBAAA;EACA,KAAK,MAAM,mBAAmB,MAAM,gEAAgE,OAAO,QAA3G;EACA,2FAAA;;AF5BJ;EACE,cAAA;EACA,mBAAA;;AAFF,WAIE;EACE,cAAA;EACA,cAAA;EACA,eAAA;EACA,cAAA;EACA,aAfU,uBAeV;EACA,gBAAA;EACA,cAAA;;AAXJ,WAcE;EACE,cAAA;EACA,kBAAA;EACA,yBAAA;EACA,YAAA;EACA,gBAAA;EACA,aA1BU,uBA0BV;EACA,cAAA;EACA,eAAA;EACA,yBAAA;EACA,aAAA;EACA,gBAAA;EACA,kBAAA;EACA,OAAO,iBAAP;;AA3BJ,WA8BE,MAAK;EACH,qBAAA;;AA/BJ,WAiCE,MAAK;EACH,gBAAA;EACA,cAAA;EACA,cAAA;EACA,eAAA;EACA,aA5CU,uBA4CV;EACA,cAAA;EACA,kBAAA;EACA,aAAA;;AG3CJ,MAAM;EACF,YAAA;EACA,kBAAA;EACA,kBAAA;EACA,eAAA;EACA,iBAAA;EACA,0CAAA;EACA,eAAA;EACA,YAAA;;AAGJ,MAAM,IAAI;EACN,kBAAkB,4CAAlB;EACA,YAAA;;ACbJ;EACI,YAAA;EACA,WAAA;EACA,mBAAA;;AAGJ;EACI,aAAa,uBAAb;;ACXJ;EACE,aAAa,uBAAb"}
Step/client/assets/styles/style.less
+4
View File
@@ -1,3 +1,7 @@
@import url(../../../libs/font-awesome/css/font-awesome.css);
@import url(../../../libs/glyphicons/styles/glyphicons.css);
@import "base/layout.less";
body{
font-family: 'Work Sans', sans-serif;
}
Step/client/dist/0.build.js
Vendored
+49 -11
View File
File diff suppressed because one or more lines are too long
Step/client/dist/1.build.js
Vendored
+26 -26
View File
File diff suppressed because one or more lines are too long
Step/client/src/App.vue
+1 -1
View File
@@ -22,7 +22,7 @@ export default {
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
Step/client/src/components/Home.vue
+4 -4
View File
@@ -1,9 +1,9 @@
<template>
<div class="hello">
<modal title="test" :is-visible="true" type="login">
<login>
</modal>
</login>
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<ul>
@@ -25,11 +25,11 @@
</template>
<script>
import { Modal } from "../modules/base-components";
import login from "../modules/login.vue";
export default {
name: "HelloWorld",
components: { modal: Modal },
components: { login },
data() {
return {
msg: "Welcome to Your Vue.js App"
Step/client/src/modules/login.ts
+9
View File
@@ -0,0 +1,9 @@
import Vue from "vue";
import Component from "vue-class-component";
import { Modal } from "./base-components"
@Component({ name: "login", components: { modal: Modal } })
export default class Login extends Vue {
}
Step/client/src/modules/login.vue
+35
View File
@@ -0,0 +1,35 @@
<template>
<modal :is-visible="true" type="login" title="Login utente">
<div>
<div class="login-form">
<img src="/client/assets/images/persona.png" class="persona">
<div class="form-group">
<label>Nome utente</label>
<input type="text" autocomplete="false" placeholder="Nome utente">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" placeholder="Password" autocomplete="false" >
<small class="error">Password errata</small>
</div>
<button class="btn btn-success">Log in</button>
</div>
</div>
</modal>
</template>
<script src="./login.ts" lang="ts"></script>
<style>
.login-form{
width: 288px;
margin: auto;
}
.persona{
margin: auto;
margin-top: 46px;
margin-bottom: 33px;
}
</style>