Fix editable entry design and flex

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

1 files changed, 28 insertions, 17 deletions

diff --git a/core/css/apps.scss b/core/css/apps.scss
index 9680ddb198c..3272d7f7166 100644
--- a/core/css/apps.scss
+++ b/core/css/apps.scss
@@ -187,6 +187,16 @@ kbd {
 			/* fix the flex positionning of the li parent */
 			top: 44px;
 		}
+		/* Show edit field if editing */
+		&.editing {
+			> a,
+			> .app-navigation-entry-utils {
+				display: none;
+			}
+			.app-navigation-entry-edit {
+				display: block;
+			}
+		}
 	}
 	&.hidden {
 		display: none;
@@ -205,11 +215,11 @@ kbd {
 		background-color: transparent;
 		background-repeat: no-repeat;
 		background-position: center;
-			&:hover,
-			&:focus {
-				background-color: transparent;
-				opacity: 1;
-			}
+		&:hover,
+		&:focus {
+			background-color: transparent;
+			opacity: 1;
+		}
 	}
 
 	/**
@@ -286,7 +296,8 @@ kbd {
 			box-shadow: none;
 		}
 		.app-navigation-entry-utils-menu-button {
-			button {
+			/* Prevent bg img override if an icon class is set */
+			button:not([class^='icon-']):not([class*=' icon-']) {
 				background-image: url('../img/actions/more.svg?v=1');
 			}
 			&:hover button,
@@ -310,19 +321,25 @@ kbd {
 	.app-navigation-entry-edit {
 		padding-left: 5px;
 		padding-right: 5px;
-		display: inline-block;
-		height: 39px;
+		display: none;
 		width: 100%;
+		form {
+			display: inline-flex;
+			width: 100%;
+		}
 		input {
 			border-bottom-right-radius: 0;
 			border-top-right-radius: 0;
-			width: calc(100% - 36px);
 			padding: 5px;
 			margin-right: 0;
 			height: 38px;
 			float: left;
 			border: 1px solid rgba(nc-lighten($color-main-text, 73%), 0.9);
 		}
+		input[type='text'] {
+			width: 100%;
+			flex: 1 1 0;
+		}
 		button,
 		input[type='submit'] {
 			width: 36px;
@@ -341,7 +358,7 @@ kbd {
 	 * Deleted entries with undo button
 	 */
 	.app-navigation-entry-deleted {
-		display: inline-block;
+		display: inline-flex;
 		height: 44px;
 		width: 100%;
 		.app-navigation-entry-deleted-description {
@@ -350,20 +367,14 @@ kbd {
 			white-space: nowrap;
 			text-overflow: ellipsis;
 			overflow: hidden;
-			display: inline-block;
-			width: calc(100% - 49px);
+			flex: 1 1 0;
 			line-height: 44px;
-			float: left;
 		}
 		.app-navigation-entry-deleted-button {
 			margin: 0;
 			height: 44px;
 			width: 44px;
 			line-height: 44px;
-			border: 0;
-			display: inline-block;
-			background-color: transparent;
-			opacity: .5;
 			&:hover, &:focus {
 				opacity: 1;
 			}