Skip to content

Commit 8522606

Browse files
modularcodermodularcoder
committed
Fix modal media grid
Fix items list date overflow Move modal tabs to _common
1 parent 1192eb1 commit 8522606

File tree

7 files changed

+143
-118
lines changed

7 files changed

+143
-118
lines changed

‎src/_common/modal/modal-tabs.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
$(function() {
2+
3+
$('.modal-tab-item a').on('click', function(e){
4+
e.preventDefault();
5+
6+
openTab(e, e.target.hash);
7+
});
8+
9+
function openTab(e, tabId) {
10+
11+
var $modalTabs = $('.modal-tabs');
12+
var $modalTabsPane = $('.modal-tab-pane');
13+
14+
// reset item tabs and panels
15+
$modalTabs.find('li').removeClass('active');
16+
$modalTabsPane.removeClass('active in ');
17+
18+
// set active tab
19+
var $activeTab = $modalTabs.find('a[href="' + tabId + '"]').closest('li');
20+
21+
// activate current tab and pane
22+
$activeTab.addClass('active');
23+
24+
$(tabId).addClass('active')
25+
.delay(150)
26+
.queue(function(next){
27+
$(this).addClass("in");
28+
next();
29+
});
30+
};
31+
32+
33+
});

‎src/_common/modal/modal-tabs.scss‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
.modal-body.modal-tab-container {
2+
padding: 0;
3+
4+
.modal-tabs {
5+
padding-left: 0;
6+
margin-bottom: 0;
7+
list-style:none;
8+
background-color: #ffffff;
9+
border-bottom: 1px solid #ddd;
10+
box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
11+
12+
.modal-tab-item {
13+
display: inline;
14+
15+
a {
16+
display: inline-block;
17+
padding: 10px 20px;
18+
}
19+
20+
&:hover,
21+
&.active {
22+
a {
23+
border-bottom: 2px solid $color-primary;
24+
}
25+
}
26+
27+
&.active {
28+
font-weight: 600;
29+
}
30+
}
31+
}
32+
33+
.modal-tab-pane {
34+
display: none;
35+
padding: 0;
36+
37+
&.active {
38+
display: block;
39+
}
40+
}
41+
}

‎src/app/_common/modals/modal-media/modal-media.hbs‎

Lines changed: 18 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -15,39 +15,34 @@
1515
<a href="#gallery">Gallery</a>
1616
</li>
1717
<li class="modal-tab-item">
18-
<a class="active" href="#upload">Upload</a>
18+
<a href="#upload">Upload</a>
1919
</li>
2020
</ul>
2121

2222
<div class="modal-tab-content">
2323
<div class="modal-tab-pane fade" id="gallery">
2424
<div class="images-container">
25-
{{#each gallery}}
26-
<div class="image-container">
27-
<div class="controls">
28-
<a href="" class="control-btn move">
29-
<i class="fa fa-arrows"></i>
30-
</a><!--
31-
--><a href="" class="control-btn star">
32-
<i class="fa"></i>
33-
</a><!--
34-
--><a href="#" class="control-btn remove" data-toggle="modal" data-target="#confirm-modal">
35-
<i class="fa fa-trash-o"></i>
36-
</a>
25+
<div class="row">
26+
{{#each gallery}}
27+
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">
28+
<div class="image-container">
29+
<div class="image" style="background-image:url('{{this.url}}')"></div>
30+
</div>
3731
</div>
38-
<div class="image" style="background-image:url('{{this.url}}')"></div>
39-
</div>
40-
{{/each}}
32+
{{/each}}
33+
</div>
4134
</div>
4235
</div>
4336
<div class="modal-tab-pane fade" id="upload">
44-
<div id="dropzone">
45-
<form action="/" method="POST" enctype="multipart/form-data" class="dropzone needsclick dz-clickable" id="demo-upload">
46-
<div class="dz-message needsclick">
47-
Drop files here or click to upload.<br>
48-
<span class="note needsclick">(This is just a demo dropzone. Selected files are <strong>not</strong> actually uploaded.)</span>
49-
</div>
50-
</form>
37+
<div class="upload-container">
38+
<div id="dropzone">
39+
<form action="/" method="POST" enctype="multipart/form-data" class="dropzone needsclick dz-clickable" id="demo-upload">
40+
<div class="dz-message needsclick">
41+
Drop files here or click to upload.<br>
42+
<span class="note needsclick">(This is just a demo dropzone. Selected files are <strong>not</strong> actually uploaded.)</span>
43+
</div>
44+
</form>
45+
</div>
5146
</div>
5247
</div>
5348
</div>

‎src/app/_common/modals/modal-media/modal-media.js‎

Lines changed: 1 addition & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -20,38 +20,4 @@ var modalMedia = {
2020
this.options.beforeClose(this.result);
2121
}
2222
}
23-
};
24-
25-
$(function(){
26-
27-
activateTab('#upload');
28-
29-
$('.modal-tab-item a').on('click', function(e){
30-
e.preventDefault();
31-
32-
activateTab(e.target.hash);
33-
});
34-
35-
function activateTab(tabId){
36-
37-
var $modalTabs = $('.modal-tabs');
38-
var $modalTabsPane = $('.modal-tab-pane');
39-
40-
// reset item tabs and panels
41-
$modalTabs.find('a').removeClass('active');
42-
$modalTabsPane.removeClass('active in ');
43-
44-
// set active tab
45-
var $activeTab = $modalTabs.find('a[href="' + tabId + '"]');
46-
47-
// activate current tab and pane
48-
$activeTab.addClass('active');
49-
50-
$(tabId).addClass('active')
51-
.delay(150)
52-
.queue(function(next){
53-
$(this).addClass("in");
54-
next();
55-
});
56-
};
57-
})
23+
};

‎src/app/_common/modals/modal-media/modal-media.scss‎

Lines changed: 40 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,45 @@
11
#modal-media {
2-
.modal-dialog {
3-
.modal-content {
4-
.modal-body {
5-
min-height: 250px;
6-
7-
.image-container {
8-
margin-bottom: 10px;
9-
}
2+
.modal-body {
3+
min-height: 250px;
4+
5+
}
6+
7+
.modal-tab-content {
8+
min-height: 300px;
9+
}
10+
11+
.images-container {
12+
padding: 15px;
13+
text-align: center;
14+
15+
.image-container {
16+
margin: 0 auto 10px auto;
17+
cursor: pointer;
18+
transition: all 0.3s ease;
19+
display: inline-block;
20+
float: none;
21+
22+
&:hover {
23+
border-color: fade-out($color-primary, 0.5);
24+
}
25+
26+
&.active {
27+
border-color: fade-out($color-primary, 0.5);
1028
}
1129
}
1230
}
31+
32+
.upload-container {
33+
padding: 15px;
34+
35+
.dropzone {
36+
border: 2px dashed $color-divider;
37+
height: 270px;
38+
39+
.dz-message {
40+
margin: 5em 0;
41+
}
42+
}
43+
}
44+
1345
}

‎src/app/_common/modals/modals.scss‎

Lines changed: 9 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -2,60 +2,18 @@
22

33
.modal-content {
44
border-radius: 0;
5+
}
56

6-
.modal-header {
7-
background-color: $color-primary;
8-
color: #ffffff;
9-
}
10-
11-
.modal-footer {
12-
.btn {
13-
margin-bottom: 0;
14-
}
15-
}
16-
17-
.modal-body.modal-tab-container {
18-
padding: 0;
19-
20-
.modal-tabs {
21-
padding-left: 0;
22-
margin-bottom: 0;
23-
list-style:none;
24-
background-color: #ffffff;
25-
border-bottom: 1px solid #ddd;
26-
box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
27-
28-
.modal-tab-item {
29-
display: inline;
30-
31-
a {
32-
display: inline-block;
33-
padding: 10px 20px;
34-
35-
&:hover,
36-
&.active {
37-
border-bottom: 2px solid $color-primary;
38-
}
39-
40-
&.active {
41-
font-weight: 600;
42-
}
43-
}
44-
}
45-
}
7+
// MOdal tabs are defined in _common/modal/modal.scss
468

47-
.modal-tab-content {
48-
min-height: 300px;
49-
50-
.modal-tab-pane {
51-
display: none;
52-
padding: 5px 10px;
9+
.modal-header {
10+
background-color: $color-primary;
11+
color: #ffffff;
12+
}
5313

54-
&.active {
55-
display: block;
56-
}
57-
}
58-
}
14+
.modal-footer {
15+
.btn {
16+
margin-bottom: 0;
5917
}
6018
}
6119
}

‎src/app/items/list/items-list-page.hbs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -192,7 +192,7 @@ items:
192192
</div>
193193
<div class="item-col item-col-date">
194194
<div class="item-heading">Published</div>
195-
<div>
195+
<div class="no-overflow">
196196
{{this.date}}
197197
</div>
198198
</div>

0 commit comments

Comments
 (0)