Skip to content

polish sidebar #215

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
juliusknorr merged 7 commits into from
Jun 27, 2017
Merged

polish sidebar #215

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e3e1bb7
polish sidebar
artemanufrij Jun 23, 2017
ad3ab87
changed css margin
artemanufrij Jun 23, 2017
0f9aff5
changed some css lines
artemanufrij Jun 24, 2017
94ec622
fixed some opactity values
artemanufrij Jun 24, 2017
cafbf92
label design
artemanufrij Jun 24, 2017
bf54dbe
changed border radius
artemanufrij Jun 26, 2017
b6b91f1
changes
artemanufrij Jun 27, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
103 changes: 76 additions & 27 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ button.button-inline:hover {
.app-navigation-entry-utils-menu-share {
display: flex !important;
padding: 14px;
opacity: 0.4;
opacity: 0.3;
}

#app-navigation .app-navigation-entry-edit {
Expand Down Expand Up @@ -293,7 +293,7 @@ button.button-inline:hover {
.stack h2 button {
margin-left: auto;
display: flex;
opacity: 0.25;
opacity: 0.3;
padding-right: 0;
}

Expand Down Expand Up @@ -328,7 +328,7 @@ button.button-inline:hover {
}

.card .card-controls .card-options {
opacity: 0.25;
opacity: 0.3;
position: absolute;
right: 10px;
top: 8px;
Expand Down Expand Up @@ -484,7 +484,7 @@ button.button-inline:hover {
margin: -4px 4px -4px -4px;
padding: 0px 4px;
font-size: 90%;
opacity: .7;
opacity: 0.7;
display: flex;
align-items: center;
}
Expand Down Expand Up @@ -526,18 +526,26 @@ button.button-inline:hover {
#card-header {
}

#card-header h2 {
#card-header h2, #sidebar-header h2 {
font-size: 14pt;
padding: 10px 10px 9px;
padding: 9px 10px;
overflow: hidden;
margin-bottom: 0;
background-color: #f0f0f0;
}

#card-header h2 input {
min-height: 0px;
margin: 0px;
}

#sidebar-header .icon-close, #card-header .icon-close {
position: absolute;
top: 5px;
right: 5px;
top: 0px;
right: 0px;
padding: 14px;
height: 44px;
width: 44px;
}

#card-meta {
Expand All @@ -549,27 +557,59 @@ button.button-inline:hover {
#card-dates {
font-size: 80%;
color: #aaaaaa;
margin-bottom: 3px;
text-align: right;
}

#card-meta #labels {
margin-bottom: 10px;
#card-tag-label {
padding-top: 0px !important;
margin-top: 0px;
}

#card-meta .duedate {
display: flex;
align-content: center;
min-height: 38px;
}

#card-meta .duedate .timepicker-input {
width: 50px;
border-radius: 0px 3px 3px 0px;
}

#card-meta .duedate .datepicker-input {
width: 85px;
margin: 3px 0px;
border-right: 0;
border-radius: 3px 0px 0px 3px;
}

#card-meta .duedate .icon {
opacity: 0.5;
}

#card-meta .duedate .icon:hover {
opacity: 0.7;
}

#card-meta .select2-container {
margin: 0px;
}

#card-description {
height: 100%;
display: flex;
flex-direction: column;
}

#card-description > h3 {
border-bottom: 1px solid #333333;
font-weight: 600;
font-size: 10pt;
padding: 5px;
#card-meta h3 {
border-bottom: 1px solid #dbdbdb;
padding: 15px 0px 5px 0px;
}

#card-meta h3 > div {
display: flex;
align-content: center;
justify-content: space-between;
}

#card-description > div {
Expand All @@ -588,20 +628,20 @@ button.button-inline:hover {
background-color: white;
}

#card-description .save-indicator {
#card-meta .save-indicator {
background-color: #009900;
color: #ffffff;
border-radius: 3px;
float: right;
padding: 1px 10px;
padding: 0px 10px;
font-size: 8pt !important;
display: none;
align-self: flex-end;
}
#card-description .icon-help {
float: right;
#card-meta .icon-help {
opacity: 0.5;
}

#sidebar-header,
.card-block {
padding: 15px;
}
Expand Down Expand Up @@ -695,7 +735,7 @@ button.button-inline:hover {
background-image: url(../../../core/img/actions/checkmark.svg);
background-position: center center;
background-repeat: no-repeat;
opacity: 1.0;
opacity: 1;
}

.colorselect .dark.selected {
Expand Down Expand Up @@ -876,10 +916,6 @@ button.button-inline:hover {
margin-top: 4px;
}

#board-detail-labels {
padding: 10px;
}

#board-detail-labels ul li input {
margin: 0px;
padding: 5px;
Expand All @@ -890,7 +926,7 @@ button.button-inline:hover {
width: 100%;
padding: 4px;
border: none;
border-radius: 0px 0px 3px 3px;
border-radius: 0px 0px 5px 5px;
}

#board-detail-labels ul li a.icon {
Expand Down Expand Up @@ -926,6 +962,10 @@ button.button-inline:hover {
margin-bottom: 0;
}

.tabsContainer {
margin-top: 15px;
}
Copy link
Member

@juliusknorr juliusknorr Jun 27, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

missing newline.


#shareWithList .avatar {
float: left;
margin-top: -5px;
Expand All @@ -948,6 +988,7 @@ button.button-inline:hover {
padding: 0;
float: left !important;
display: block;
border-radius: 0px 0px 5px 5px !important;
}

.ui-select-match-item .select-label {
Expand All @@ -956,6 +997,10 @@ button.button-inline:hover {
margin-right: -23px !important;
}

.ui-select-choices-group .choose-label {
padding: 6px;
}

.select2-container-multi .select2-choices .select2-search-choice {
padding: 3px 0 !important;
border: 0 !important;
Expand All @@ -977,6 +1022,10 @@ button.button-inline:hover {
width:100% !important;
}

.select2-result-label {
padding: 0px !important;
}

.select2-result-label span {
display: flex;
}
Expand Down
97 changes: 25 additions & 72 deletions templates/part.card.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,54 +28,45 @@
<?php p($l->t('by')); ?>
<span>{{ cardservice.getCurrent().owner.displayname }}</span>
</div>

<h3 id='card-tag-label'>
<?php p($l->t('Tags')); ?>
</h3>
<div id="labels">
<ui-select multiple tagging="" ng-model="card.labels" theme="select2"
ng-disabled="boardservice.isArchived() || card.archived"
style="width:100%;" title="Choose a label"
placeholder="Add a label"
style="width:100%;" title="<?php p($l->t('Choose a label')); ?>"
placeholder="<?php p($l->t('Add a label')); ?>"
on-select="labelAssign($item, $model)"
on-remove="labelRemove($item, $model)" ng-disabled="!boardservice.canEdit() || archived">
<ui-select-match placeholder="Select labels…">
<ui-select-match placeholder="<?php p($l->t('Select labels…')); ?>">
<span class="select-label" style="background-color:#{{$item.color}}; color:{{ $item.color|textColorFilter }};">{{$item.title}}&nbsp;</span>
</ui-select-match>
<ui-select-choices
repeat="label in boardservice.getCurrent().labels | filter:$select.search">
<span
style="background-color:#{{label.color}}; color:{{ label.color|textColorFilter }};">{{label.title}}</span>
<span class="choose-label" style="background-color:#{{label.color}}; color:{{ label.color|textColorFilter }};">{{label.title}}</span>
</ui-select-choices>
</ui-select>

<div class="duedate">
<input class="datepicker-input medium focus" type="text" placeholder="Set a due date" value="{{ cardservice.getCurrent().duedate | parseDate }}" datepicker="due" />
<input class="timepicker-input medium focus" type="text" placeholder="00:00:00" ng-if="cardservice.getCurrent().duedate" value="{{ cardservice.getCurrent().duedate | parseTime }}" timepicker="due" />
<button class="icon icon-delete button-inline" title="<?php p($l->t('Remove due date')); ?>" ng-if="cardservice.getCurrent().duedate" ng-click="resetDuedate()"></button>
</div>

</div>
<h3>
<?php p($l->t('Due date')); ?>
</h3>
<div class="duedate">
<input class="datepicker-input medium focus" type="text" placeholder="<?php p($l->t('Click to set')); ?>" value="{{ cardservice.getCurrent().duedate | parseDate }}" datepicker="due" />
<input class="timepicker-input medium focus" type="text" placeholder="00:00:00" ng-if="cardservice.getCurrent().duedate" value="{{ cardservice.getCurrent().duedate | parseTime }}" timepicker="due" />
<button class="icon icon-delete button-inline" title="<?php p($l->t('Remove due date')); ?>" ng-if="cardservice.getCurrent().duedate" ng-click="resetDuedate()"></button>
</div>

<!--<div id="assigned-users">
<ui-select multiple tagging="" ng-model="card.assignees"
theme="bootstrap" style="width:100%;"
title="Choose a user to assign"
placeholder="Assign users…"
on-select="userAssign($item, $model)"
on-remove="userRemove($item, $model)" ng-disabled="archived">
<ui-select-match placeholder="Select users…">{{$item.title}}
</ui-select-match>
<ui-select-choices
repeat="label in boardservice.getCurrent().labels | filter:$select.search">
<span
style="background-color:#{{label.color}}">{{label.title}}</span>
</ui-select-choices>
</ui-select>
</div>//-->


<div id="card-description">
<h3>
<?php p($l->t('Description')); ?>
<a href="https://github.com/nextcloud/deck/wiki/Markdown-Help" target="_blank" class="icon-help" title="<?php p($l->t('Formatting help')); ?>"></a>
<span class="save-indicator"><?php p($l->t('Saved')); ?></span>
<div>
Copy link
Member

@juliusknorr juliusknorr Jun 27, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is the need of two wrapping divs here? h3 is already a block element that could be used.

Copy link
Member Author

@artemanufrij artemanufrij Jun 27, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

for display: flex.

Copy link
Member

@juliusknorr juliusknorr Jun 27, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But we can just apply the flex styles to #card-meta h3 or am I missing something?

Copy link
Member Author

@artemanufrij artemanufrij Jun 27, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

display: flex changes some margin/padding behavior. It looks some different in compare to standard h3

<div>
<?php p($l->t('Description')); ?>
<a href="https://github.com/nextcloud/deck/wiki/Markdown-Help" target="_blank" class="icon-help" title="<?php p($l->t('Formatting help')); ?>"></a>
</div>
<span class="save-indicator"><?php p($l->t('Saved')); ?></span>
</div>

</h3>
<textarea elastic ng-if="status.cardEditDescription"
placeholder="Enter your description here…"
Expand All @@ -89,43 +80,5 @@
<div class="placeholder"
ng-if="!cardservice.getCurrent().description"><?php p($l->t('Add a card description…')); ?></div>
</div>

</div>


Copy link
Member

@juliusknorr juliusknorr Jun 27, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🙈 👍

</div>

<!--
<ul class="tabHeaders">
<li class="tabHeader" ng-class="{'selected': (status.boardtab==0 || !status.boardtab)}" ng-click="status.boardtab=0"><a><?php p($l->t('Attachments')); ?></a></li>
<li class="tabHeader" ng-class="{'selected': (status.boardtab==1)}" ng-click="status.boardtab=1"><a><?php p($l->t('Comments')); ?></a></li>
<li class="tabHeader" ng-class="{'selected': (status.boardtab==2)}" ng-click="status.boardtab=2"><a><?php p($l->t('History')); ?></a></li>
</ul>
<div class="tabsContainer">
<div id="commentsTabView" class="tab commentsTabView" ng-if="status.boardtab==0 || !status.boardtab">
<div id="card-attachments">
<button ng-click="status.addAttachment=true"><i class="fa fa-plus"></i> Add an attachment</button>
<div ng-if="status.addAttachment" id="attachment-add">
<button><i class="fa fa-file"></i> Attach a File</button>
<button><i class="fa fa-link"></i> Attach a URL</button>
</div>
<ul>
<li>
<a href="#">
<span class="fa fa-file"></span> myfilename.pdf
<div class="details">
<span class="user">Added by John Doe at</span>
<span class="added">1.3.2014 14:13</span>
</div>
</a>
</li>
</ul>
</div>
</div>
<div id="board-detail-labels" class="tab commentsTabView" ng-if="status.boardtab==1">
</div>
<div id="commentsTabView" class="tab commentsTabView" ng-if="status.boardtab==2">
</div>
</div>

//-->
</div>