Skip to content

Commit

Permalink
Improve card's edit button + dropdown menu
Browse files Browse the repository at this point in the history
  • Loading branch information
@JoelAlphonso
JoelAlphonso committed Aug 8, 2018
1 parent 9e77bfb commit 25fb4f9
Show file tree
Hide file tree
Showing 3 changed files with 54 additions and 45 deletions.
2 changes: 1 addition & 1 deletion assets/dist/styles/charcoal.admin.css
View file

Large diffs are not rendered by default.

7 changes: 6 additions & 1 deletion assets/src/styles/charcoal/admin/components/_table-card.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@

.card-body {
position: relative;
padding-right: 2.5rem;
}

.card-status {
Expand All @@ -22,8 +23,12 @@
top: 0;
right: 0;

.dropdown-toggle:after {
content: none;
}

button {
font-size: 20px;
font-size: 14px;
}
}

Expand Down
90 changes: 47 additions & 43 deletions templates/charcoal/admin/widget/card-collection.mustache
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,55 +21,59 @@
<div class="col-md-{{ bsColRatio }} col-12 mb-4{{# sortable }} card-sortable js-sortable-item{{/ sortable }}" {{& attr }} data-id="{{ objectId }}" data-type="{{ objType }}">
<div class="card-container h-100">
<div class="card c-table-card h-100">

{{# object }}
{{# image }}
<span class="card-img-top" style="background-image: url({{# withBaseUrl }}{{ . }}{{/ withBaseUrl }});"></span>
{{/ image }}

{{# image }}
<span class="card-img-top" style="background-image: url({{# withBaseUrl }}{{ . }}{{/ withBaseUrl }});"></span>
{{/ image }}

<div class="card-body">
{{# sortable }}
<button class="btn btn-small sortable-handle js-sortable-handle" type="button">
<span class="dots d-flex flex-wrap justify-content-center align-items-center m-auto">
<span></span><span></span><span></span><span></span><span></span><span></span>
</span>
</button>
{{/ sortable }}
<div class="card-body">
{{# sortable }}
<button class="btn btn-small sortable-handle js-sortable-handle" type="button">
<span class="dots d-flex flex-wrap justify-content-center align-items-center m-auto">
<span></span><span></span><span></span><span></span><span></span><span></span>
</span>
</button>
{{/ sortable }}

<div class="dropdown tool-dropdown p-2">
<button class="btn btn-outline-primary border-0" type="button" data-toggle="dropdown" aria-haspopup="true">
<i class="fa fa-ellipsis-v"></i>
</button>
<div class="dropdown-menu">
{{# showObjectActions }}
{{# objectActions }}
<a class="btn btn-primary dropdown-item"
href="{{ url }}"
{{# target }}
target="{{ . }}"
{{/ target }}
{{# widgetType }}
data-widget-type="{{ . }}"
{{/ widgetType }}
{{# dataAttributes }}
data-{{ key }}="{{ value }}"
{{/ dataAttributes }}
>{{> charcoal/admin/widget/actions/label }}</a>
<!--<a href="#" class="btn btn-primary">{{ label }}</a>-->
{{/ objectActions }}
{{/ showObjectActions }}
<div class="tool-dropdown p-2">
<div class="btn-group-vertical">
<a class="btn btn-link border-0" href="{{ objectEditUrl }}&obj_id={{id}}">
<i class="fa fa-edit"></i>
</a>
<div class="dropdown btn-group" role="group">
<button class="btn btn-link dropdown-toggle border-0" role="group" type="button" data-toggle="dropdown" aria-haspopup="true">
<i class="fa fa-ellipsis-v"></i>
</button>
<div class="dropdown-menu">
{{# showObjectActions }}
{{# objectActions }}
<a class="dropdown-item"
href="{{ url }}"
{{# target }}
target="{{ . }}"
{{/ target }}
{{# widgetType }}
data-widget-type="{{ . }}"
{{/ widgetType }}
{{# dataAttributes }}
data-{{ key }}="{{ value }}"
{{/ dataAttributes }}
>{{> charcoal/admin/widget/actions/label }}</a>
<!--<a href="#" class="btn btn-primary">{{ label }}</a>-->
{{/ objectActions }}
{{/ showObjectActions }}
</div>
</div>
</div>
</div>
{{> $widget_template }}
</div>
</div>
{{> $widget_template }}
</div>

<div class="card-footer d-flex align-items-center justify-content-between">
<small class="text-muted">{{#_t}}Last updated{{/_t}} <span class="js-last-time" data-time="{{ lastModified.getTimestamp }}">-</span></small>
<small class="card-status chip{{# active }} chip-success{{/ active }}"></small>
</div>
<div class="card-footer d-flex align-items-center justify-content-between">
<small class="text-muted">{{#_t}}Last updated{{/_t}} <span class="js-last-time" data-time="{{ lastModified.getTimestamp }}">-</span></small>
<small class="card-status chip{{# active }} chip-success{{/ active }}"></small>
</div>
{{/ object }}

</div>
</div>
</div>
Expand Down

0 comments on commit 25fb4f9

Please sign in to comment.