luxolus
/
open-vault
2
0
Fork 0
Code Issues 1 Pull Requests Releases Activity

Fix mobile display of info table row

This commit is contained in:
Joshua Ogle 2018-07-10 15:48:36 -06:00
parent 2b34025f12
commit 50e2065bec
3 changed files with 52 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
ui/app/styles/components/info-table-row.scss
View File

@ -22,26 +22,6 @@
padding-top: 0.3rem;
}
@include until($tablet) {
padding: 0;
}
&:first-child {
padding-left: 0;
@include until($tablet) {
padding: $size-8 0 0;
}
}
&:last-child {
padding-right: 0;
@include until($tablet) {
padding: 0 0 $size-8;
}
}
textarea {
min-height: 35px;
}
@ -52,6 +32,28 @@
}
}
.info-table-row:not(.is-mobile) .column {
@include until($tablet) {
padding: 0;
}
&:first-child {
padding-left: 0;
@include until($tablet) {
padding: $size-8 0 0;
}
}
&:last-child {
padding-right: 0;
@include until($tablet) {
padding: 0 0 $size-8;
}
}
}
.info-table-row-header {
margin: 0;

26
ui/app/templates/components/identity/item-alias/alias-metadata.hbs
View File

@ -1,15 +1,19 @@
{{#each-in model.metadata as |key value|}}
<div class="info-table-row">
<div class="column is-5 has-text-weight-semibold">
{{key}}
</div>
<div class="column is-5">
{{value}}
</div>
<div class="column has-text-right">
{{#if model.canEdit}}
{{identity/popup-metadata params=(array model key)}}
{{/if}}
<div class="info-table-row is-mobile">
<div class="is-flex is-fullwidth">
<div class="column is-one-quarter">
<span class="is-label has-text-grey-dark">
{{key}}
</span>
</div>
<div class="column is-5">
{{value}}
</div>
<div class="column has-text-right">
{{#if model.canEdit}}
{{identity/popup-metadata params=(array model key)}}
{{/if}}
</div>
</div>
</div>
{{else}}

26
ui/app/templates/components/identity/item-metadata.hbs
View File

@ -1,15 +1,19 @@
{{#each-in model.metadata as |key value|}}
<div class="info-table-row">
<div class="column is-5 has-text-weight-semibold">
{{key}}
</div>
<div class="column is-5">
{{value}}
</div>
<div class="column has-text-right">
{{#if model.canEdit}}
{{identity/popup-metadata params=(array model key)}}
{{/if}}
<div class="info-table-row is-mobile">
<div class="is-flex is-fullwidth">
<div class="column is-one-quarter">
<span class="is-label has-text-grey-dark">
{{key}}
</span>
</div>
<div class="column is-flex">
{{value}}
</div>
<div class="column has-text-right">
{{#if model.canEdit}}
{{identity/popup-metadata params=(array model key)}}
{{/if}}
</div>
</div>
</div>
{{else}}