clipperz/password-manager-mirror
1
0
Fork 0
mirror of http://git.whoc.org.uk/git/password-manager.git synced 2025-10-29 18:37:35 +01:00
Code Issues Releases Wiki Activity

Initial draft of card editing mode

Browse Source 
Still very early draft with tons of issues still to address, and no styling at all.

Disabled CSS preprocessor, due to limitations in Python SCSS processor.
Updated date Copyright notice.
This commit is contained in:
Giulio Cesare Solaroli
2014-08-22 08:38:53 +02:00
parent 9922591658
commit ed1c8081a5
19 changed files with 600 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
frontend/delta/scss/core/layout.scss
View File

@@ -265,17 +265,17 @@ div.cardContent {
@include flexbox();
div.view {
& > div.view, & > div.edit {
@include flex(auto);
@include flexbox;
@include flex-direction(column);
.cardDetailToolbar {
@include flex(none);
height: $mainCardToolbarHeight;
line-height: $mainCardToolbarHeight;
}
// .cardDetailToolbar {
// @include flex(none);
// height: $mainCardToolbarHeight;
// line-height: $mainCardToolbarHeight;
// }
.content {
@include flex(auto);
@@ -287,20 +287,20 @@ div.cardContent {
#cardDetailPage {
.view {
& > .view, & > .edit {
@include flexbox();
@include flex-direction(column);
height: 100%;
/*
.cardDetailToolbar {
@include flex(none);
height: $mainCardToolbarHeight;
line-height: $mainCardToolbarHeight;
& > div {
&.commands > div {
@include flexbox();
@include flex-direction(row);
font-size: 24pt;
// font-size: 24pt;
.back {
@include flex(auto);
@@ -312,8 +312,20 @@ div.cardContent {
cursor: pointer;
}
}
&.edit {
ul {
@include flexbox();
@include flex-direction(row);
li {
@include flex(auto);
cursor: pointer;
}
}
}
}
*/
.content {
@include flex(auto);
overflow-y: scroll;
@@ -321,6 +333,66 @@ div.cardContent {
}
}
.cardDetailToolbar {
@include flex(none);
height: $mainCardToolbarHeight;
line-height: $mainCardToolbarHeight;
&.edit {
li.save {
cursor: default;
}
&.hasPendingChanges {
li.save {
cursor: pointer;
}
}
}
&.commands > div {
@include flexbox();
@include flex-direction(row);
// font-size: 24pt;
.back {
@include flex(auto);
cursor: pointer;
}
.cardMenuOptions {
@include flex(auto);
cursor: pointer;
}
}
// &.edit {
// ul {
// @include flexbox();
// @include flex-direction(row);
//
// li {
// @include flex(auto);
// cursor: pointer;
// }
// }
// }
ul {
@include flexbox();
@include flex-direction(row);
li {
@include flex(auto);
cursor: pointer;
span {
}
}
}
}
.button {
cursor: pointer;
}

46
frontend/delta/scss/core/palette.scss
View File

@@ -22,14 +22,44 @@ $solarize-Accent-Blue: #268bd2;
$solarize-Accent-Cyan: #2aa198;
$solarize-Accent-Green: #859900;
// $yellow: $solarize-Accent-Yellow;
// $orange: $solarize-Accent-Orange;
// $red: $solarize-Accent-Red;
// $magenta: $solarize-Accent-Magenta;
// $violete: $solarize-Accent-Violet;
// $blue: $solarize-Accent-Blue;
// $cyan: $solarize-Accent-Cyan;
// $green: $solarize-Accent-Green;
//
// Flat UI
// http://designmodo.github.io/Flat-UI/
//
$turquoise: #1abc9c;
$green-sea: #16a085;
$emerald: #2ecc71;
$nephritis: #27ae60;
$peter-river: #3498db;
$belize-hole: #2980b9;
$amethyst: #9b59b6;
$wisteria: #8e44ad;
$wet-asphalt: #34495e;
$midnight-blue: #2c3e50;
$sun-flower: #f1c40f;
$orange: #f39c12;
$carrot: #e67e22;
$pumpkin: #d35400;
$alizarin: #e74c3c;
$pomegranate: #c0392b;
$clouds: #ecf0f1;
$silver: #bdc3c7;
$concrete: #95a5a6;
$asbestos: #7f8c8d;
//-------------------------------------------------
$clipperz-orange: #ff9900;
$clipperz-blue: #1863a1;

54
frontend/delta/scss/style/card.scss
View File

@@ -104,22 +104,12 @@ $cardViewBasePadding: 10px;
}
.cardDetailToolbar {
ul {
@include flexbox();
@include flex-direction(row);
li {
@include flex(auto);
text-align: center;
span {
cursor: pointer;
}
}
}
background-color: $cardToolbarBackgroundColor;
color: white;
&.narrow {
font-size: 24pt;
.back {
@include icon-font();
}
@@ -183,6 +173,13 @@ $cardViewBasePadding: 10px;
}
}
}
.edit {
.cardDetailToolbar {
background-color: purple;
color: white;
}
}
}
@@ -190,11 +187,31 @@ $cardViewBasePadding: 10px;
.cardDetailToolbar {
background-color: $cardToolbarBackgroundColor;
color: white;
&.edit {
li {
font-weight: 100;
}
li.save {
color: yellow;
}
&.hasPendingChanges {
li {
font-weight: 500;
}
li.save {
color: white;
}
}
}
ul {
li {
text-align: center;
}
}
&.narrow {
.cardMenuOptions {
margin-right: 5px;
}
@@ -276,3 +293,4 @@ $cardViewBasePadding: 10px;
cursor: pointer;
}
}