ds_media_library 0.1.0 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/.DS_Store +0 -0
- data/.gitignore +1 -0
- data/README.md +1 -1
- data/app/assets/javascripts/ds_media_library.coffee +66 -16
- data/app/assets/stylesheets/_breadcrumb-nav.sass +25 -0
- data/app/assets/stylesheets/_help-text.sass +5 -0
- data/app/assets/stylesheets/_media-tree.sass +194 -0
- data/app/assets/stylesheets/_modal.sass +65 -0
- data/app/assets/stylesheets/_placeholders.sass +43 -0
- data/app/assets/stylesheets/_preview-media.sass +88 -0
- data/app/assets/stylesheets/ds_media_library.sass +139 -0
- data/app/assets/stylesheets/mixins/_buttons.sass +57 -0
- data/app/assets/stylesheets/mixins/_icons.sass +36 -0
- data/app/assets/stylesheets/mixins/_notification-text.sass +23 -0
- data/app/controllers/ds_media_library/folders_controller.rb +7 -2
- data/app/controllers/ds_media_library/resources_controller.rb +3 -2
- data/{lib → app/helpers}/ds_media_library/form_helper.rb +24 -17
- data/app/views/ds_media_library/form_helper/_folder.html.slim +10 -0
- data/app/views/ds_media_library/form_helper/_media_library_helper.html.slim +46 -0
- data/app/views/ds_media_library/form_helper/_resource.html.slim +6 -0
- data/app/views/ds_media_library/form_helper/show.html.slim +10 -0
- data/app/views/{shared → ds_media_library/manage}/_submit.html.slim +0 -0
- data/app/views/ds_media_library/manage/folders/_folder.html.slim +14 -0
- data/app/views/ds_media_library/{resources/folder_form.html.slim → manage/folders/form.html.slim} +4 -4
- data/app/views/ds_media_library/manage/index.html.slim +30 -0
- data/app/views/{shared → ds_media_library/manage/resources}/_image_preview.html.slim +2 -2
- data/app/views/ds_media_library/manage/resources/_resource.html.slim +12 -0
- data/app/views/ds_media_library/{resources → manage/resources}/form.html.slim +3 -3
- data/bin/server +1 -1
- data/bin/setup +1 -2
- data/ds_media_library.gemspec +1 -0
- data/dummy/app.rb +1 -48
- data/dummy/config.rb +55 -0
- data/dummy/database.rb +6 -0
- data/dummy/views.rb +14 -65
- data/lib/ds_media_library/engine.rb +4 -2
- data/lib/ds_media_library/version.rb +1 -1
- data/lib/ds_media_library.rb +0 -1
- metadata +40 -15
- data/app/assets/javascripts/toggle_all_checkboxes.coffee +0 -6
- data/app/views/ds_media_library/_folder.html.slim +0 -11
- data/app/views/ds_media_library/_form_helper.html.slim +0 -30
- data/app/views/ds_media_library/_image_preview.html.slim +0 -17
- data/app/views/ds_media_library/_resource.html.slim +0 -27
- data/app/views/ds_media_library/resources/_folder.html.slim +0 -14
- data/app/views/ds_media_library/resources/_resource.html.slim +0 -12
- data/app/views/ds_media_library/resources/index.html.slim +0 -28
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 8b6e8af1bf91a7838f73eed01b5fc3e4a0d8bd47
|
|
4
|
+
data.tar.gz: 0632748ecc6db6115ab9e302617aa574a56520d4
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: a79bf020761b8f8bf20ef7801557c4fbd31caba1c4485b714cff61f390542dd4d5e43e32e77f959acc5dcea202ef344f730aab4ee0e6a0bb3a60d42a8dd9e8c2
|
|
7
|
+
data.tar.gz: a0211d9041b9c99083c0160f050bc41019a519d29b3c90d71aeb8053e1857af5a4f969900e24d32d6d791adf4b8fd6600e6a3d229a4c826e8ed2e40b1f677f80
|
data/.DS_Store
ADDED
|
Binary file
|
data/.gitignore
CHANGED
data/README.md
CHANGED
|
@@ -62,7 +62,7 @@ end
|
|
|
62
62
|
|
|
63
63
|
After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake` to run the tests.
|
|
64
64
|
|
|
65
|
-
You can also run `bin/server` to start a dummy app at http://localhost:
|
|
65
|
+
You can also run `bin/server` to start a dummy app at http://localhost:3000 that will allow you to experiment. Note that the state of the app is destroyed on exit.
|
|
66
66
|
|
|
67
67
|
To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org). You can then run `bundle update ds_media_library` in projects that use it to update them to the newly-released version.
|
|
68
68
|
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
#= require jquery
|
|
2
2
|
#= require jquery_ujs
|
|
3
3
|
#= require jquery-ui/widgets/sortable
|
|
4
|
-
#= require toggle_all_checkboxes
|
|
5
4
|
|
|
6
5
|
$ ->
|
|
7
6
|
$("[data-media-library]").each ->
|
|
@@ -11,35 +10,86 @@ class MediaLibrary
|
|
|
11
10
|
constructor: (@$el) ->
|
|
12
11
|
baseId = @$el.attr("data-media-library")
|
|
13
12
|
@ids = JSON.parse(@$el.attr("data-media-library-ids"))
|
|
14
|
-
@$el.find("
|
|
15
|
-
@$
|
|
13
|
+
@template = @$el.find("#dsml-media-preview-template")[0].innerHTML
|
|
14
|
+
@$el.on "change", "[name=ds_media_library]:radio", => @closeModal()
|
|
15
|
+
@$target = $("#dsml-selected-media-" + baseId)
|
|
16
16
|
@$modalToggle = $("#" + baseId)
|
|
17
|
-
@$modalToggle.change (event) =>
|
|
18
|
-
@showPreviews() unless event.target.checked
|
|
17
|
+
@$modalToggle.change (event) => @modalToggle(event.target.checked)
|
|
19
18
|
@showPreviews()
|
|
20
19
|
|
|
21
20
|
closeModal: ->
|
|
22
21
|
@$modalToggle.prop(checked: false).change()
|
|
23
22
|
|
|
23
|
+
modalToggle: (shouldOpen) ->
|
|
24
|
+
if shouldOpen
|
|
25
|
+
@$el.find("[data-load-url]").each (index, el)->
|
|
26
|
+
url = $(el).attr("data-load-url")
|
|
27
|
+
$(el).removeAttr("data-load-url").load(url)
|
|
28
|
+
else
|
|
29
|
+
@showPreviews()
|
|
30
|
+
|
|
24
31
|
showPreviews: ->
|
|
25
32
|
@$target.empty()
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
33
|
+
selectedMedia = @$el.find("[name=ds_media_library]:checked").toArray()
|
|
34
|
+
contexts = selectedMedia.map (resource, index) => @createContext(resource, index)
|
|
35
|
+
sortedContexts = contexts.sort (a,b) => @sortContexts(a,b) if @ids.length > 0
|
|
36
|
+
previews = sortedContexts.map (context) => @renderTemplate context
|
|
29
37
|
@$target.append previews.join("\n")
|
|
30
38
|
@$target.sortable()
|
|
31
39
|
|
|
32
|
-
|
|
33
|
-
|
|
40
|
+
createContext: (resource, index) ->
|
|
41
|
+
context = @extractContext(resource)
|
|
42
|
+
context.index = index + 1
|
|
43
|
+
context.type = if context.resourcestype == "v" then "video" else "img"
|
|
44
|
+
context.url = "/assets/" + context.resourcespath + context.resourcesfilename
|
|
45
|
+
context.id = parseInt($(resource).attr("value"))
|
|
46
|
+
context
|
|
47
|
+
|
|
48
|
+
extractContext: (resource) ->
|
|
49
|
+
obj = {}
|
|
50
|
+
for attr in resource.attributes
|
|
51
|
+
if attr.specified and /^data-/.test(attr.name)
|
|
52
|
+
obj[attr.name.slice(5)] = attr.value
|
|
53
|
+
obj
|
|
34
54
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
bId = @extractId(b)
|
|
38
|
-
if @ids.indexOf(aId) < @ids.indexOf(bId)
|
|
55
|
+
sortContexts: (a, b) ->
|
|
56
|
+
if @ids.indexOf(a.id) < @ids.indexOf(b.id)
|
|
39
57
|
-1
|
|
40
58
|
else
|
|
41
59
|
1
|
|
42
60
|
|
|
43
|
-
|
|
44
|
-
|
|
61
|
+
renderTemplate: (context) ->
|
|
62
|
+
template = @template
|
|
63
|
+
for key, value of context
|
|
64
|
+
template = template.replace ///{{#{key}}}///g, value
|
|
65
|
+
template
|
|
66
|
+
|
|
67
|
+
$ ->
|
|
68
|
+
$("body").on "click", "[data-dsml-toggle-all-checkboxes]", (event) ->
|
|
69
|
+
event.preventDefault()
|
|
70
|
+
$checkboxes = $($(this).attr("data-dsml-toggle-all-checkboxes"))
|
|
71
|
+
$checkboxes.prop checked: !$checkboxes.is(":checked")
|
|
72
|
+
|
|
73
|
+
$ ->
|
|
74
|
+
$("body").on "keyup", "#dsml-search-media", (event) ->
|
|
75
|
+
folderSelector = $("[data-dsml-toggle-all-checkboxes]").attr("data-dsml-toggle-all-checkboxes")
|
|
76
|
+
resourceSelector = $("[data-dsml-search-media]").attr("data-dsml-search-media")
|
|
77
|
+
$tree = $(this).siblings("#dsml-media-tree")
|
|
78
|
+
term = event.target.value.toLowerCase()
|
|
79
|
+
|
|
80
|
+
if term.length > 0
|
|
81
|
+
$tree.find(folderSelector).prop checked: true
|
|
82
|
+
|
|
83
|
+
$tree.find(resourceSelector).each ->
|
|
84
|
+
labelText = $(this).find("label").text().toLowerCase()
|
|
85
|
+
isFound = labelText.indexOf(term) != -1
|
|
86
|
+
$(this).toggle isFound
|
|
87
|
+
|
|
88
|
+
$tree.find(folderSelector).each ->
|
|
89
|
+
hasFoundResource = $(this).parent().find(resourceSelector).length > 0
|
|
90
|
+
$(this).parent().toggle hasFoundResource
|
|
91
|
+
|
|
92
|
+
else
|
|
93
|
+
$tree.find(folderSelector).prop checked: false
|
|
94
|
+
$tree.find("li").show()
|
|
45
95
|
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
.dsml-breadcrumb-nav
|
|
2
|
+
@extend %dsml-reset-list
|
|
3
|
+
padding: 10px 40px
|
|
4
|
+
border-bottom: 1px solid #efefef
|
|
5
|
+
background: #fafafa
|
|
6
|
+
li
|
|
7
|
+
font: 300 0.9em $default
|
|
8
|
+
color: #101010
|
|
9
|
+
display: inline-block
|
|
10
|
+
text-transform: uppercase
|
|
11
|
+
&:before
|
|
12
|
+
display: none
|
|
13
|
+
&:after
|
|
14
|
+
content: "→"
|
|
15
|
+
margin: 0 5px
|
|
16
|
+
display: inline-block
|
|
17
|
+
color: #101010
|
|
18
|
+
&:last-child
|
|
19
|
+
&:after
|
|
20
|
+
display: none
|
|
21
|
+
a
|
|
22
|
+
color: #101010
|
|
23
|
+
border-bottom: 1px dashed #101010
|
|
24
|
+
&:hover
|
|
25
|
+
border-color: #101010
|
|
@@ -0,0 +1,194 @@
|
|
|
1
|
+
$itemHeight: 40px
|
|
2
|
+
|
|
3
|
+
.dsml-media-nav
|
|
4
|
+
@extend %dsml-reset-list
|
|
5
|
+
width: 100%
|
|
6
|
+
margin: 25px 0 0
|
|
7
|
+
font: $font-weight 1.4em $default
|
|
8
|
+
*
|
|
9
|
+
box-sizing: border-box
|
|
10
|
+
li
|
|
11
|
+
margin: 2px 0
|
|
12
|
+
.dsml-media-nest
|
|
13
|
+
margin: 0
|
|
14
|
+
|
|
15
|
+
.dsml-media-container
|
|
16
|
+
display: flex
|
|
17
|
+
width: 100%
|
|
18
|
+
border: 1px solid #e0e0e0
|
|
19
|
+
line-height: $itemHeight
|
|
20
|
+
flex-wrap: wrap
|
|
21
|
+
padding: 0 10px
|
|
22
|
+
.dsml-expand-label, .dsml-media-links
|
|
23
|
+
display: inline-block
|
|
24
|
+
vertical-align: middle
|
|
25
|
+
margin: 0
|
|
26
|
+
.dsml-expand-label
|
|
27
|
+
flex-grow: 1
|
|
28
|
+
font-size: 1em
|
|
29
|
+
line-height: $itemHeight
|
|
30
|
+
cursor: pointer
|
|
31
|
+
a
|
|
32
|
+
display: block
|
|
33
|
+
.dsml-move-span
|
|
34
|
+
display: none
|
|
35
|
+
.filename
|
|
36
|
+
color: #666
|
|
37
|
+
display: inline-block
|
|
38
|
+
border: 1px dashed red
|
|
39
|
+
.dsml-media-links
|
|
40
|
+
flex-basis: 80px
|
|
41
|
+
text-align: right
|
|
42
|
+
&:hover
|
|
43
|
+
background: lighten($yellow, 50%)
|
|
44
|
+
|
|
45
|
+
.dsml-folder-link, .dsml-media-link
|
|
46
|
+
&:before
|
|
47
|
+
@extend .fa
|
|
48
|
+
width: 15px
|
|
49
|
+
display: inline-block
|
|
50
|
+
margin-right: 4px
|
|
51
|
+
|
|
52
|
+
.dsml-folder-link
|
|
53
|
+
@extend .fa-folder
|
|
54
|
+
font-weight: 900
|
|
55
|
+
color: #444
|
|
56
|
+
|
|
57
|
+
.dsml-media-link
|
|
58
|
+
@extend .fa-file-o
|
|
59
|
+
display: block
|
|
60
|
+
padding: 0 20px
|
|
61
|
+
margin-left: -10px !important
|
|
62
|
+
width: calc(100% + 20px)
|
|
63
|
+
b, i
|
|
64
|
+
display: inline-block
|
|
65
|
+
i
|
|
66
|
+
&:before
|
|
67
|
+
display: inline-block
|
|
68
|
+
margin: 0 5px
|
|
69
|
+
content: "-"
|
|
70
|
+
&[alt$=".jpg"], &[alt$=".jpeg"], &[alt$=".png"], &[alt="Image"]
|
|
71
|
+
@extend .fa-file-picture-o
|
|
72
|
+
&[alt$=".pdf"], &[alt="PDF"]
|
|
73
|
+
@extend .fa-file-pdf-o
|
|
74
|
+
&[alt$=".mp4"], &[alt="Video"]
|
|
75
|
+
@extend .fa-file-video-o
|
|
76
|
+
&[alt$=".com"], &[alt$=".edu"], &[alt$=".org"], &[alt="Web link"]
|
|
77
|
+
@extend .fa-globe
|
|
78
|
+
&.expired
|
|
79
|
+
&:before
|
|
80
|
+
content: "\f071"
|
|
81
|
+
|
|
82
|
+
.dsml-modal-input, .dsml-asset-input
|
|
83
|
+
&:checked
|
|
84
|
+
& ~ .dsml-media-link
|
|
85
|
+
background: $red
|
|
86
|
+
color: #fff
|
|
87
|
+
@extend .fa-check
|
|
88
|
+
|
|
89
|
+
.dsml-media-nest
|
|
90
|
+
list-style: none
|
|
91
|
+
width: 100%
|
|
92
|
+
display: block
|
|
93
|
+
display: none
|
|
94
|
+
li
|
|
95
|
+
padding-left: 20px
|
|
96
|
+
|
|
97
|
+
.dsml-expand-input
|
|
98
|
+
position: absolute !important
|
|
99
|
+
z-index: 4
|
|
100
|
+
cursor: pointer
|
|
101
|
+
opacity: 0.001
|
|
102
|
+
&:checked
|
|
103
|
+
& ~ .dsml-media-nest
|
|
104
|
+
display: block
|
|
105
|
+
& + .dsml-media-container
|
|
106
|
+
.dsml-folder-link
|
|
107
|
+
@extend .fa-folder-open
|
|
108
|
+
|
|
109
|
+
.dsml-modal-content
|
|
110
|
+
.dsml-media-links
|
|
111
|
+
display: none
|
|
112
|
+
|
|
113
|
+
// SELECT MEDIA
|
|
114
|
+
|
|
115
|
+
.dsml-move-input
|
|
116
|
+
position: absolute
|
|
117
|
+
left: -20px
|
|
118
|
+
opacity: 0.001
|
|
119
|
+
&:checked
|
|
120
|
+
& + .dsml-expand-label
|
|
121
|
+
span.dsml-media-link
|
|
122
|
+
background: $red
|
|
123
|
+
color: #fff
|
|
124
|
+
@extend .fa-check
|
|
125
|
+
|
|
126
|
+
.dsml-move-selected
|
|
127
|
+
display: none
|
|
128
|
+
vertical-align: top
|
|
129
|
+
float: none
|
|
130
|
+
margin: 0
|
|
131
|
+
width: auto
|
|
132
|
+
line-height: 36px
|
|
133
|
+
select
|
|
134
|
+
width: auto
|
|
135
|
+
margin: 0
|
|
136
|
+
vertical-align: middle
|
|
137
|
+
font-size: 1.3em
|
|
138
|
+
|
|
139
|
+
.dsml-move-selected-label
|
|
140
|
+
color: #444
|
|
141
|
+
font-size: 1.3em
|
|
142
|
+
vertical-align: middle
|
|
143
|
+
margin: 0 10px 0 0
|
|
144
|
+
|
|
145
|
+
#dsml-select-media
|
|
146
|
+
position: absolute
|
|
147
|
+
top: -20px
|
|
148
|
+
opacity: 0.001
|
|
149
|
+
z-index: 2
|
|
150
|
+
&:checked
|
|
151
|
+
& ~ .dsml-table-buttons-flex
|
|
152
|
+
.dsml-select-media-button
|
|
153
|
+
+dsml-button($primaryColor, #fff, 1.1em, true, "check")
|
|
154
|
+
margin-right: 10px
|
|
155
|
+
.dsml-move-selected
|
|
156
|
+
display: inline-block
|
|
157
|
+
|
|
158
|
+
#dsml-select-media
|
|
159
|
+
&:checked
|
|
160
|
+
& ~ .dsml-media-nav
|
|
161
|
+
.dsml-media-container
|
|
162
|
+
.dsml-media-links
|
|
163
|
+
display: none
|
|
164
|
+
.dsml-expand-label
|
|
165
|
+
a
|
|
166
|
+
display: none
|
|
167
|
+
.dsml-move-span
|
|
168
|
+
display: block
|
|
169
|
+
|
|
170
|
+
.dsml-select-media-button
|
|
171
|
+
+dsml-button(#fcfcfc, #444, 1.1em, true, "check")
|
|
172
|
+
|
|
173
|
+
.dsml-move-button
|
|
174
|
+
+dsml-icon("arrow-circle-right")
|
|
175
|
+
border: none
|
|
176
|
+
background: none
|
|
177
|
+
font-size: 2.2em
|
|
178
|
+
margin-left: 6px
|
|
179
|
+
cursor: pointer
|
|
180
|
+
vertical-align: middle
|
|
181
|
+
|
|
182
|
+
|
|
183
|
+
// ICONS
|
|
184
|
+
|
|
185
|
+
.dsml-media-links
|
|
186
|
+
a
|
|
187
|
+
height: $itemHeight
|
|
188
|
+
vertical-align: top
|
|
189
|
+
.dsml-edit-icon
|
|
190
|
+
+dsml-icon("pencil")
|
|
191
|
+
.dsml-delete-icon
|
|
192
|
+
+dsml-icon("trash")
|
|
193
|
+
&:hover::before
|
|
194
|
+
color: $red
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
.dsml-modal-input
|
|
2
|
+
opacity: 0.001
|
|
3
|
+
position: absolute !important
|
|
4
|
+
z-index: 2
|
|
5
|
+
&:checked ~ .dsml-modal-wrapper
|
|
6
|
+
left: 0
|
|
7
|
+
opacity: 1
|
|
8
|
+
.dsml-modal-content
|
|
9
|
+
display: inline-block
|
|
10
|
+
.dsml-modal-bg
|
|
11
|
+
opacity: 1
|
|
12
|
+
|
|
13
|
+
.dsml-modal-wrapper
|
|
14
|
+
position: fixed
|
|
15
|
+
display: -webkit-flex
|
|
16
|
+
display: flex
|
|
17
|
+
top: 0
|
|
18
|
+
left: -100vw
|
|
19
|
+
width: 100vw
|
|
20
|
+
height: 100vh
|
|
21
|
+
z-index: 9999
|
|
22
|
+
text-align: left
|
|
23
|
+
transition: all 0.2s ease-in 0.1s
|
|
24
|
+
|
|
25
|
+
.dsml-modal-bg
|
|
26
|
+
background: rgba(#808080, 0.85)
|
|
27
|
+
opacity: 0
|
|
28
|
+
position: absolute
|
|
29
|
+
z-index: 2
|
|
30
|
+
width: 100vw
|
|
31
|
+
height: 100vh
|
|
32
|
+
top: 0
|
|
33
|
+
left: 0
|
|
34
|
+
|
|
35
|
+
.dsml-modal-content
|
|
36
|
+
display: none
|
|
37
|
+
box-sizing: border-box
|
|
38
|
+
background: #fff
|
|
39
|
+
margin: auto 0
|
|
40
|
+
width: 94vw
|
|
41
|
+
height: 100vh
|
|
42
|
+
padding: 40px
|
|
43
|
+
z-index: 3
|
|
44
|
+
overflow: auto
|
|
45
|
+
position: relative
|
|
46
|
+
|
|
47
|
+
.dsml-modal-close
|
|
48
|
+
position: absolute
|
|
49
|
+
top: 0px
|
|
50
|
+
right: 0px
|
|
51
|
+
margin: 0
|
|
52
|
+
color: #ccc
|
|
53
|
+
font-size: 2.4em
|
|
54
|
+
cursor: pointer
|
|
55
|
+
width: 40px
|
|
56
|
+
height: 40px
|
|
57
|
+
line-height: 40px
|
|
58
|
+
background: #fff
|
|
59
|
+
text-align: center
|
|
60
|
+
&:hover
|
|
61
|
+
color: $red
|
|
62
|
+
&:before
|
|
63
|
+
display: inline-block
|
|
64
|
+
font-family: fontawesome
|
|
65
|
+
content: "\f00d"
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
%dsml-reset-list
|
|
2
|
+
margin: 0
|
|
3
|
+
padding: 0
|
|
4
|
+
list-style: none
|
|
5
|
+
li
|
|
6
|
+
margin: 0
|
|
7
|
+
padding: 0
|
|
8
|
+
|
|
9
|
+
%dsml-generic-input
|
|
10
|
+
font: 200 $font-size $default
|
|
11
|
+
width: 100%
|
|
12
|
+
line-height: 2em
|
|
13
|
+
max-height: 40px
|
|
14
|
+
padding: 0 0 0 6px
|
|
15
|
+
border: 1px solid #d0d0d0
|
|
16
|
+
background: #fff
|
|
17
|
+
box-shadow: #ccc 0 1px 4px 0 inset
|
|
18
|
+
border-radius: 2px
|
|
19
|
+
&::-webkit-input-placeholder
|
|
20
|
+
color: #999
|
|
21
|
+
&:-moz-placeholder
|
|
22
|
+
color: #999
|
|
23
|
+
&::-moz-placeholder
|
|
24
|
+
color: #999
|
|
25
|
+
&:-ms-input-placeholder
|
|
26
|
+
color: #999
|
|
27
|
+
&:focus
|
|
28
|
+
outline-color: $primaryColor
|
|
29
|
+
&::-webkit-input-placeholder
|
|
30
|
+
color: transparent
|
|
31
|
+
&:-moz-placeholder
|
|
32
|
+
color: transparent
|
|
33
|
+
&::-moz-placeholder
|
|
34
|
+
color: transparent
|
|
35
|
+
&:-ms-input-placeholder
|
|
36
|
+
color: transparent
|
|
37
|
+
&.sm-input
|
|
38
|
+
width: 100px
|
|
39
|
+
& + p
|
|
40
|
+
display: inline-block
|
|
41
|
+
color: #666
|
|
42
|
+
font-size: 1.2em
|
|
43
|
+
margin: 0 0 0 5px
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
.dsml-stacked-preview
|
|
2
|
+
.dsml-preview-form
|
|
3
|
+
display: inline-block
|
|
4
|
+
|
|
5
|
+
.dsml-preview-form
|
|
6
|
+
display: block
|
|
7
|
+
margin-top: 10px
|
|
8
|
+
font-size: 1em
|
|
9
|
+
img, video
|
|
10
|
+
& ~ input
|
|
11
|
+
& + label
|
|
12
|
+
top: 5px
|
|
13
|
+
right: 5px
|
|
14
|
+
width: 30px
|
|
15
|
+
height: 30px
|
|
16
|
+
line-height: 30px
|
|
17
|
+
font-size: 2em
|
|
18
|
+
input
|
|
19
|
+
position: absolute
|
|
20
|
+
opacity: 0.001
|
|
21
|
+
&:checked
|
|
22
|
+
& + label
|
|
23
|
+
background: rgba(#fff, 0.5)
|
|
24
|
+
&:before
|
|
25
|
+
color: rgba(#000, 0.8)
|
|
26
|
+
&:hover
|
|
27
|
+
background: rgba(#fff, 0.6)
|
|
28
|
+
&:before
|
|
29
|
+
color: #000
|
|
30
|
+
& + label
|
|
31
|
+
@extend .fa-trash
|
|
32
|
+
cursor: pointer
|
|
33
|
+
width: 20px
|
|
34
|
+
height: 20px
|
|
35
|
+
line-height: 20px
|
|
36
|
+
margin: 0
|
|
37
|
+
box-shadow: #333 0 0 2px
|
|
38
|
+
border-radius: 2px
|
|
39
|
+
background: $red
|
|
40
|
+
text-align: center
|
|
41
|
+
font-size: 1.4em
|
|
42
|
+
position: absolute
|
|
43
|
+
right: -25px
|
|
44
|
+
top: -4px
|
|
45
|
+
&:before
|
|
46
|
+
@extend .fa
|
|
47
|
+
display: inline-block
|
|
48
|
+
color: #fff
|
|
49
|
+
|
|
50
|
+
span
|
|
51
|
+
color: transparent
|
|
52
|
+
display: inline-block
|
|
53
|
+
text-indent: -9999px
|
|
54
|
+
width: 0px
|
|
55
|
+
figcaption
|
|
56
|
+
font-size: 1.2em
|
|
57
|
+
color: #999
|
|
58
|
+
|
|
59
|
+
.dsml-preview-wrapper
|
|
60
|
+
display: inline-block
|
|
61
|
+
position: relative
|
|
62
|
+
dt
|
|
63
|
+
display: block
|
|
64
|
+
img
|
|
65
|
+
max-width: 100%
|
|
66
|
+
|
|
67
|
+
.dsml-remove-asset
|
|
68
|
+
display: inline-block
|
|
69
|
+
input
|
|
70
|
+
position: absolute
|
|
71
|
+
opacity: 0.001
|
|
72
|
+
left: -15px
|
|
73
|
+
z-index: 1
|
|
74
|
+
&:checked
|
|
75
|
+
& + label, & + label:hover
|
|
76
|
+
&:before
|
|
77
|
+
color: $red
|
|
78
|
+
& + label
|
|
79
|
+
@extend .fa-trash
|
|
80
|
+
cursor: pointer
|
|
81
|
+
margin: 0
|
|
82
|
+
&:before
|
|
83
|
+
@extend .fa
|
|
84
|
+
display: inline-block
|
|
85
|
+
color: rgba(#444, 0.8)
|
|
86
|
+
&:hover
|
|
87
|
+
&:before
|
|
88
|
+
color: #444
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
// VARIABLES
|
|
2
|
+
|
|
3
|
+
$primaryColor: #CC0000
|
|
4
|
+
$secondaryColor: darken($primaryColor, 5%)
|
|
5
|
+
$bg: #f9f9f9
|
|
6
|
+
|
|
7
|
+
$teal: #0a628a
|
|
8
|
+
$green: #398927
|
|
9
|
+
$red: #CC0000
|
|
10
|
+
$yellow: #e5c105
|
|
11
|
+
|
|
12
|
+
$font-size: 1.6em
|
|
13
|
+
$font-weight: 300
|
|
14
|
+
$font: Helvetica, sans-serif
|
|
15
|
+
$default: Helvetica, sans-serif
|
|
16
|
+
|
|
17
|
+
// IMPORTS
|
|
18
|
+
|
|
19
|
+
@import font-awesome
|
|
20
|
+
@import "placeholders"
|
|
21
|
+
@import "mixins/buttons"
|
|
22
|
+
@import "mixins/icons"
|
|
23
|
+
@import "mixins/notification-text"
|
|
24
|
+
|
|
25
|
+
@import "breadcrumb-nav"
|
|
26
|
+
@import "help-text"
|
|
27
|
+
@import "media-tree"
|
|
28
|
+
@import "modal"
|
|
29
|
+
@import "preview-media"
|
|
30
|
+
|
|
31
|
+
//
|
|
32
|
+
|
|
33
|
+
body
|
|
34
|
+
font: 300 62.5% $default
|
|
35
|
+
|
|
36
|
+
.dsml
|
|
37
|
+
*
|
|
38
|
+
box-sizing: border-box
|
|
39
|
+
position: relative
|
|
40
|
+
|
|
41
|
+
.dsml .hidden
|
|
42
|
+
display: none
|
|
43
|
+
|
|
44
|
+
.dsml-media-nest
|
|
45
|
+
display: none
|
|
46
|
+
|
|
47
|
+
.dsml-expand-input:checked ~ .dsml-media-nest
|
|
48
|
+
display: block
|
|
49
|
+
|
|
50
|
+
.dsml-media-button, .flash-notice, .flash-alert
|
|
51
|
+
text-transform: uppercase
|
|
52
|
+
|
|
53
|
+
// FORM ELEMENTS
|
|
54
|
+
|
|
55
|
+
.dsml-label
|
|
56
|
+
color: $primaryColor
|
|
57
|
+
display: block
|
|
58
|
+
font: 700 $font-size $default
|
|
59
|
+
margin-bottom: 8px
|
|
60
|
+
&.dsml-optional
|
|
61
|
+
&:after
|
|
62
|
+
content: "(optional)"
|
|
63
|
+
color: #999
|
|
64
|
+
font-size: 0.8em
|
|
65
|
+
display: inline-block
|
|
66
|
+
margin-left: 4px
|
|
67
|
+
font-style: italic
|
|
68
|
+
font-weight: 200
|
|
69
|
+
em
|
|
70
|
+
color: #666
|
|
71
|
+
& + span, & + p
|
|
72
|
+
display: inline-block
|
|
73
|
+
margin: 0
|
|
74
|
+
font-size: $font-size
|
|
75
|
+
line-height: 1.2em
|
|
76
|
+
|
|
77
|
+
// OPEN ALL
|
|
78
|
+
|
|
79
|
+
#open-all
|
|
80
|
+
position: absolute
|
|
81
|
+
left: -20px
|
|
82
|
+
|
|
83
|
+
.dsml-open-all-label
|
|
84
|
+
+dsml-button(#fcfcfc, #444, 1.1em, true, "folder-open")
|
|
85
|
+
|
|
86
|
+
// SEARCH MEDIA
|
|
87
|
+
|
|
88
|
+
#dsml-search_media
|
|
89
|
+
margin: 10px 0 0
|
|
90
|
+
|
|
91
|
+
input.dsml-text
|
|
92
|
+
@extend %dsml-generic-input
|
|
93
|
+
margin: 10px 0 0
|
|
94
|
+
|
|
95
|
+
// TABLE BUTTONS
|
|
96
|
+
|
|
97
|
+
.dsml-media-button
|
|
98
|
+
+dsml-button(#f6f6f6, #444, 1.1em)
|
|
99
|
+
padding: 0 10px
|
|
100
|
+
margin-left: 5px
|
|
101
|
+
& + em
|
|
102
|
+
margin: 0 5px
|
|
103
|
+
|
|
104
|
+
.dsml-media-wrapper
|
|
105
|
+
overflow: auto
|
|
106
|
+
height: 100%
|
|
107
|
+
|
|
108
|
+
input[multiple="multiple"]
|
|
109
|
+
& ~ .dsml-playlist-media
|
|
110
|
+
display: flex
|
|
111
|
+
flex-wrap: wrap
|
|
112
|
+
justify-content: flex-start
|
|
113
|
+
.dsml-preview-form
|
|
114
|
+
flex: 0 1 32%
|
|
115
|
+
margin: 10px 1% 0 0
|
|
116
|
+
|
|
117
|
+
.dsml-table-buttons
|
|
118
|
+
text-align: right
|
|
119
|
+
clear: both
|
|
120
|
+
a
|
|
121
|
+
margin-left: 10px
|
|
122
|
+
|
|
123
|
+
.dsml-add-button
|
|
124
|
+
+dsml-button($teal, #fcfcfc, 1.1em, true, "plus")
|
|
125
|
+
|
|
126
|
+
.dsml-table-buttons-flex
|
|
127
|
+
display: flex
|
|
128
|
+
display: -webkit-flex
|
|
129
|
+
clear: both
|
|
130
|
+
.dsml-buttons-right
|
|
131
|
+
text-align: right
|
|
132
|
+
a
|
|
133
|
+
margin-left: 10px
|
|
134
|
+
.dsml-buttons-left
|
|
135
|
+
flex: 1 0
|
|
136
|
+
a, label
|
|
137
|
+
margin-right: 10px
|
|
138
|
+
display: inline-block
|
|
139
|
+
|