aboutsummaryrefslogtreecommitdiffstats
path: root/mediagoblin/static
diff options
context:
space:
mode:
Diffstat (limited to 'mediagoblin/static')
-rw-r--r--mediagoblin/static/css/audio.css3
-rw-r--r--mediagoblin/static/css/base.css156
l---------mediagoblin/static/extlib/video-js2
-rw-r--r--mediagoblin/static/images/small-gavroche.pngbin0 -> 4599 bytes
-rw-r--r--mediagoblin/static/images/small-gavroche.xcfbin0 -> 392752 bytes
-rw-r--r--mediagoblin/static/images/type_icons/video.pngbin0 -> 1245 bytes
l---------mediagoblin/static/js/extlib/html5slider.js1
l---------mediagoblin/static/js/extlib/jquery.js2
-rw-r--r--mediagoblin/static/js/geolocation-map.js6
-rw-r--r--mediagoblin/static/js/header_dropdown.js24
-rw-r--r--mediagoblin/static/js/post_comment.js63
11 files changed, 230 insertions, 27 deletions
diff --git a/mediagoblin/static/css/audio.css b/mediagoblin/static/css/audio.css
index e007a0e1..5c50e727 100644
--- a/mediagoblin/static/css/audio.css
+++ b/mediagoblin/static/css/audio.css
@@ -1,6 +1,9 @@
.audio-spectrogram {
position: relative;
}
+.audio-spectrogram > img {
+ width: 100%;
+}
.playhead {
position: absolute;
top: 0;
diff --git a/mediagoblin/static/css/base.css b/mediagoblin/static/css/base.css
index 0bd58738..6da19f94 100644
--- a/mediagoblin/static/css/base.css
+++ b/mediagoblin/static/css/base.css
@@ -25,7 +25,7 @@
src: local('Lato Regular'), local('Lato-Regular'), url('../fonts/Lato-Regular.ttf') format('truetype');
}
-body {
+html, body {
background-color: #161616;
color: #C3C3C3;
padding: 0;
@@ -110,6 +110,23 @@ input, textarea {
/* website structure */
+#wrap {
+ min-height: 100%;
+ height: auto;
+
+ /* This must be equal to the footer height + 5px */
+ margin-bottom: -35px;
+}
+
+#wrap:after {
+ content: "";
+ display: block;
+}
+
+footer, #wrap:after {
+ height: 30px;
+}
+
header {
width: 100%;
padding: 0;
@@ -154,6 +171,26 @@ header {
a.logo {
color: #fff;
font-weight: bold;
+ text-decoration: none;
+}
+
+.status_icon {
+ border-radius: 2px;
+ padding: 4px;
+ margin: 0px 4px;
+}
+
+.num_queued {
+ background: #56446F;
+}
+
+.num_failed {
+ background: #87453B;
+}
+
+.status_icon a {
+ display: inline-block;
+ color: #C3C3C3;
}
.logo img {
@@ -176,9 +213,7 @@ a.logo {
footer {
width: 100%;
- height: 30px;
border-top: 1px solid #333;
- bottom: 0px;
padding: 8px 0;
text-align: center;
font-size: 0.875em;
@@ -196,14 +231,20 @@ footer {
}
.media_image_container {
- display: flex;
- justify-content: center;
}
.media_image {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
max-width: 100%;
}
+.media_other_container {
+ display: flex;
+ justify-content: center;
+}
+
.media_pane {
/* in place for possible future wide view */
/* border-bottom: 1px solid #333333;*/
@@ -353,6 +394,12 @@ text-align: center;
margin-right: auto;
}
+.form_box > h1, .form_box_xl > h1 {
+ /* Fix header overflowing issue. */
+ overflow: hidden;
+ text-overflow: ellipsis
+}
+
.form_box_xl {
max-width: 460px;
}
@@ -416,11 +463,9 @@ text-align: center;
}
.form_field_label {
- margin-bottom: 4px;
-}
-
-.form_field_label {
font-size:1.125em;
+ margin-bottom: 0;
+ padding: 10px 0;
}
.form_field_description {
@@ -544,11 +589,11 @@ ul#action_to_resolve {list-style:none; margin-left:10px;}
border-radius: 0 0 5px 5px;
padding: 0 0 6px;
text-overflow: ellipsis;
- white-space: nowrap;
overflow: hidden;
border-color: #0D0D0D;
border-style: solid;
border-width: 1px 1px 2px;
+ position: relative;
}
.media_thumbnail a {
@@ -566,12 +611,11 @@ a.thumb_entry_title {
padding: 8px;
}
-/* For now, this is commented out since our thumbnails are actually 180px high.
- *
- * .media_thumbnail img {
- * max-height: 135px;
- * }
- */
+.entry_type_icon {
+ position: absolute;
+ top: 2px;
+ left: 2px;
+}
.thumb_entry_last {
margin-right: 0px;
@@ -733,6 +777,42 @@ table.media_panel th {
padding-bottom: 4px;
text-align: left;
}
+.thumb-overlay-status {
+ position: absolute;
+ margin: auto;
+ top: 0; bottom: 0; left: 0; right: 0;
+ width: 180px;
+ height: 20px;
+ display: inline;
+ text-align: center;
+ background-color: rgba(255, 255, 255, 0.8);
+}
+
+.thumb-processing {
+ color: black;
+ font-weight: bold;
+}
+
+.thumb-failed {
+ color: red;
+ font-weight: bold;
+}
+
+.thumb-wrapper {
+ position: relative;
+/* for proportional thumb resizing */
+ width: auto;
+ height: auto;
+ display: inline-block;
+}
+
+.thumb-wrapper img {
+ max-height: 180px;
+ max-width: 180px;
+}
+.media_panel td {
+ vertical-align: middle;
+}
/* moderator panels */
@@ -872,7 +952,12 @@ pre {
margin-left:3px;
margin-right:3px;
}
+ #thingy_view {
+ width:640px;
+ height:640px;
+ }
}
+
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
.container .three.columns.media_thumbnail {
@@ -881,7 +966,7 @@ pre {
margin-right:2px;
}
.media_thumbnail.thumb_entry img {
- margin-left: -16.5px;
+ max-width:100%;
}
.thumb_gallery {
margin-left: 0;
@@ -889,7 +974,12 @@ pre {
}
.navigation_button {
}
+ #thingy_view {
+ width:508px;
+ height:508px;
+ }
}
+
/* All Mobile Sizes (devices and browser) */
@media screen and (max-width: 767px) {
.thumb_row {
@@ -931,6 +1021,22 @@ pre {
}
}
+/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
+@media only screen and (min-width: 480px) and (max-width: 767px) {
+ #thingy_view {
+ width:420px;
+ height:420px;
+ }
+}
+
+/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
+@media only screen and (max-width: 479px) {
+ #thingy_view {
+ width:300px;
+ height:300px;
+ }
+}
+
p.verifier {
text-align:center;
font-size:50px;
@@ -950,3 +1056,19 @@ table.metadata_editor tr td {
table.metadata_editor tr td.form_field_input input {
width:350px;
}
+
+.application {
+ min-height: 30px;
+ margin-left: 70px;
+}
+
+.application-icon {
+ position: absolute;
+ left: 12px;
+ width: 50px;
+ height: 50px;
+}
+
+.application-button {
+ float: right;
+}
diff --git a/mediagoblin/static/extlib/video-js b/mediagoblin/static/extlib/video-js
index 65652d6e..58401be0 120000
--- a/mediagoblin/static/extlib/video-js
+++ b/mediagoblin/static/extlib/video-js
@@ -1 +1 @@
-../../../extlib/video-js/ \ No newline at end of file
+../../../extlib/video.js/dist/video-js \ No newline at end of file
diff --git a/mediagoblin/static/images/small-gavroche.png b/mediagoblin/static/images/small-gavroche.png
new file mode 100644
index 00000000..13192d97
--- /dev/null
+++ b/mediagoblin/static/images/small-gavroche.png
Binary files differ
diff --git a/mediagoblin/static/images/small-gavroche.xcf b/mediagoblin/static/images/small-gavroche.xcf
new file mode 100644
index 00000000..0291d2e1
--- /dev/null
+++ b/mediagoblin/static/images/small-gavroche.xcf
Binary files differ
diff --git a/mediagoblin/static/images/type_icons/video.png b/mediagoblin/static/images/type_icons/video.png
new file mode 100644
index 00000000..83687617
--- /dev/null
+++ b/mediagoblin/static/images/type_icons/video.png
Binary files differ
diff --git a/mediagoblin/static/js/extlib/html5slider.js b/mediagoblin/static/js/extlib/html5slider.js
deleted file mode 120000
index feae2cb8..00000000
--- a/mediagoblin/static/js/extlib/html5slider.js
+++ /dev/null
@@ -1 +0,0 @@
-../../../../extlib/html5slider/html5slider.js \ No newline at end of file
diff --git a/mediagoblin/static/js/extlib/jquery.js b/mediagoblin/static/js/extlib/jquery.js
index d78f5cc3..8c711f27 120000
--- a/mediagoblin/static/js/extlib/jquery.js
+++ b/mediagoblin/static/js/extlib/jquery.js
@@ -1 +1 @@
-../../../../extlib/jquery/jquery.js \ No newline at end of file
+../../../../extlib/jquery/dist/jquery.js \ No newline at end of file
diff --git a/mediagoblin/static/js/geolocation-map.js b/mediagoblin/static/js/geolocation-map.js
index 26d94c5d..c30788f7 100644
--- a/mediagoblin/static/js/geolocation-map.js
+++ b/mediagoblin/static/js/geolocation-map.js
@@ -30,13 +30,11 @@ $(document).ready(function () {
// Get a new map instance attached and element with id="tile-map"
var map = new L.Map('tile-map');
- var mqtileUrl = 'http://otile{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.jpg';
+ var mqtileUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var mqtileAttrib = '<a id="osm_license_link">see map license</a>';
var mqtile = new L.TileLayer(
mqtileUrl,
- {maxZoom: 18,
- attribution: mqtileAttrib,
- subdomains: '1234'});
+ {maxZoom: 18});
map.attributionControl.setPrefix('');
var location = new L.LatLng(latitude, longitude);
diff --git a/mediagoblin/static/js/header_dropdown.js b/mediagoblin/static/js/header_dropdown.js
index 3ee46228..979d2690 100644
--- a/mediagoblin/static/js/header_dropdown.js
+++ b/mediagoblin/static/js/header_dropdown.js
@@ -17,9 +17,27 @@
*/
$(document).ready(function(){
- $("#header_dropdown").hide();
- $(".header_dropdown_up").hide();
- $(".header_dropdown_down,.header_dropdown_up").click(function() {
+ // The header drop-down header panel defaults to open until you explicitly
+ // close it. After that, the panel open/closed setting will persist across
+ // page loads.
+
+ // Initialise the panel status when page is loaded.
+ if (localStorage.getItem("panel_closed")) {
+ $("#header_dropdown").hide();
+ $(".header_dropdown_up").hide();
+ }
+ else {
+ $(".header_dropdown_down").hide();
+ }
+
+ // Toggle and persist the panel status.
+ $(".header_dropdown_down, .header_dropdown_up").click(function() {
+ if (localStorage.getItem("panel_closed")) {
+ localStorage.removeItem("panel_closed");
+ }
+ else {
+ localStorage.setItem("panel_closed", "true");
+ }
$(".header_dropdown_down").toggle();
$(".header_dropdown_up").toggle();
$("#header_dropdown").slideToggle();
diff --git a/mediagoblin/static/js/post_comment.js b/mediagoblin/static/js/post_comment.js
new file mode 100644
index 00000000..431c222f
--- /dev/null
+++ b/mediagoblin/static/js/post_comment.js
@@ -0,0 +1,63 @@
+/**
+ * GNU MediaGoblin -- federated, autonomous media hosting
+ * Copyright (C) 2011, 2012 MediaGoblin contributors. See AUTHORS.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+$(document).ready(function(){
+ $(function() {
+ // Hide this button if script is enabled
+ $('.form_submit_buttons').find('input').hide();
+
+ // Include this link if script is enabled
+ $('.form_submit_buttons').append(
+ '<a class="button_action" id="post_comment" type="button">' +
+ 'Add this comment </a>');
+
+ $('#post_comment').click(function() {
+ $.ajax({
+ url: $('#postCommentURL').val(),
+ data: $('#form_comment').serialize(),
+ type: 'POST',
+ success: function(response) {
+ var message = $(response).find('.mediagoblin_messages');
+ var commentsInResponse = $($(response).find('.media_comments')).find('li');
+ var commentsInPage = $('.media_comments').find('ul');
+
+ // Post the message
+ message.css({"position":"fixed", "top":"50px", "width":"100%"});
+ $('body').append(message);
+ message.delay(1500).fadeOut();
+
+ // Checking if there is new comment
+ if(commentsInResponse.length != $(commentsInPage).find('li').length) {
+ // Post comment and scroll down to it
+ var newComment = commentsInResponse[commentsInResponse.length - 1];
+ $('#form_comment').fadeOut('fast');
+ $('#button_addcomment').fadeIn('fast');
+ $('#comment_preview').replaceWith("<div id=comment_preview></div>");
+ $(commentsInPage).append(newComment);
+ $('html, body').animate({
+ scrollTop: $(newComment).offset().top
+ }, 1000);
+ }
+ },
+ error: function(error) {
+ console.log(error);
+ }
+ });
+ });
+ });
+}); \ No newline at end of file