From 211d0d96c5a8a39dfab1d9a42bfcf6f4b63deaa6 Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Thu, 3 Nov 2016 12:30:39 +0100 Subject: [PATCH] Display a bottom border on inputs, not completely transparent --- src/styles/_app_base.sass | 36 ++++++++++++------- src/styles/_tasks.sass | 8 +++-- .../attract/shots/view_shot_embed.jade | 12 +++---- .../attract/tasks/view_task_embed.jade | 26 +++++++------- 4 files changed, 48 insertions(+), 34 deletions(-) diff --git a/src/styles/_app_base.sass b/src/styles/_app_base.sass index a8e8bf6..d3a2cf1 100644 --- a/src/styles/_app_base.sass +++ b/src/styles/_app_base.sass @@ -175,10 +175,7 @@ nav.sidebar .input-group-flex display: flex - .input-transparent-group+.input-transparent-group - margin-left: 10px - -.input-transparent-group +.input-group width: 100% display: flex align-items: center @@ -201,17 +198,30 @@ select.input-transparent input, input.form-control background-color: transparent -.input-transparent - border: thin solid transparent - border-radius: 3px - padding: 5px - margin-top: 10px - margin-bottom: 10px - width: 100% +.input-group + input, textarea, select + border-radius: 0 - &:hover - border: thin solid $color-text-dark-hint + input, textarea, select + border: thin solid transparent + border-bottom-color: $color-background-dark + padding: 5px + margin-top: 10px + margin-bottom: 10px + width: 100% + transition: all 150ms ease-in-out + + &:hover + border-bottom-color: $color-text-dark-secondary + + &:focus + outline: 0 + border-bottom-color: $color-primary + box-shadow: 0 1px 0 0 $color-primary + + select + border-radius: 3px #status-bar color: $color-text-dark-secondary diff --git a/src/styles/_tasks.sass b/src/styles/_tasks.sass index b21a164..51d70d5 100644 --- a/src/styles/_tasks.sass +++ b/src/styles/_tasks.sass @@ -9,9 +9,13 @@ .item-name font-size: 1.6em - h2.item-name + margin: 0 + + +text-overflow-ellipsis + + span.item-name padding-left: 5px - margin-top: 10px + margin-top: 0 .item-description padding: 10px 5px diff --git a/src/templates/attract/shots/view_shot_embed.jade b/src/templates/attract/shots/view_shot_embed.jade index cbc6fd4..fa519ba 100644 --- a/src/templates/attract/shots/view_shot_embed.jade +++ b/src/templates/attract/shots/view_shot_embed.jade @@ -1,8 +1,8 @@ .attract-box.shot.with-status(class="status-{{ shot.properties.status }}") form#shot_form(onsubmit="return shot_save('{{shot._id}}', '{{ url_for('attract.shots.perproject.save', project_url=project['url'], shot_id=shot._id) }}')") input(type='hidden',name='_etag',value='{{ shot._etag }}') - .input-transparent-group - h2.item-name(title="Shot names can only be updated from Blender.") {{ shot.name | hide_none }} + .input-group + span.item-name(title="Shot names can only be updated from Blender.") {{ shot.name | hide_none }} button.copy-to-clipboard.btn.item-id( style="margin-left: auto", name="Copy to Clipboard", @@ -12,14 +12,14 @@ | ID | {% if 'PUT' in shot.allowed_methods %} - .input-transparent-group + .input-group textarea#item-description.input-transparent( name="description", type="text", rows=1, placeholder='Description') {{ shot.description | hide_none }} - .input-transparent-group + .input-group label(for="shot-status") Status: select.input-transparent#shot-status( name="status") @@ -27,7 +27,7 @@ | | {% endfor %} - .input-transparent-group + .input-group textarea#item-notes.input-transparent( name="notes", type="text", @@ -36,7 +36,7 @@ .input-group-separator - .input-transparent-group + .input-group button#item-save.btn.btn-default.btn-block(type=submit) i.pi-check diff --git a/src/templates/attract/tasks/view_task_embed.jade b/src/templates/attract/tasks/view_task_embed.jade index 6f93b2b..de70b46 100644 --- a/src/templates/attract/tasks/view_task_embed.jade +++ b/src/templates/attract/tasks/view_task_embed.jade @@ -3,15 +3,15 @@ form#task_form(onsubmit="return task_save('{{task._id}}', '{{ url_for('attract.tasks.perproject.save', project_url=project['url'], task_id=task._id) }}')") input(type='hidden',name='_etag',value='{{ task._etag }}') //- NOTE: if you add fields here, also add them read-only below. - .input-transparent-group + .input-group | {% if 'PUT' in task.allowed_methods %} - input.input-transparent.item-name( + input.item-name( name="name", type="text", - placeholder='Name', + placeholder='Task Title', value="{{ task.name | hide_none }}") | {% else %} - h2.item-name {{ task.name | hide_none }} + span.item-name {{ task.name | hide_none }} | {% endif %} .dropdown(style='margin-left: auto') @@ -40,17 +40,17 @@ | {% endif %} | {% if 'PUT' in task.allowed_methods %} - .input-transparent-group - textarea#task-description.input-transparent( + .input-group + textarea#task-description( name="description", type="text", rows=1, placeholder='Description') {{ task.description | hide_none }} .input-group-flex - .input-transparent-group.field-type + .input-group.field-type label#task-task_type Type: - select.input-transparent(name="task_type",aria-describedby="task-task_type") + select(name="task_type",aria-describedby="task-task_type") | {% for task_type in attract_props.task_types.attract_shot %} | | {% endfor %} @@ -58,9 +58,9 @@ option(value="{{ task.properties.task_type }}",selected).invalid_task {{ task.properties.task_type | undertitle }} | {% endif %} - .input-transparent-group + .input-group label#task-status Status: - select.input-transparent( + select( name="status", aria-describedby="task-status") | {% for status in task_node_type.dyn_schema.status.allowed %} @@ -69,9 +69,9 @@ .input-group-separator - .input-transparent-group.select_multiple + .input-group.select_multiple label Assignees: - select#assignees.input-transparent( + select#assignees( name="users", multiple, placeholder="Assigned to" @@ -82,7 +82,7 @@ .input-group-separator - .input-transparent-group + .input-group button#item-save.btn.btn-default.btn-block(type='submit') i.pi-check | Save Task