style.css: new css mobile. Initial integration.

js/hide-images.js

@@ -16,7 +16,7 @@
 
 $(document).ready(function(){
 	$('<style type="text/css"> img.hidden{ opacity: 0.1; background: grey; border: 1px solid #000; } </style>').appendTo($('head'));
-	
+
 	if (!localStorage.hiddenimages)
 		localStorage.hiddenimages = '{}';
 
@@ -47,9 +47,9 @@ $(document).ready(function(){
 		if (!hidden_data[board]) {
 			hidden_data[board] = {}; // id : timestamp
 		}
-		
+
-		var replacement = $('<span>'+_('File')+' <small>(<a class="hide-image-link" href="javascript:void(0)">'+_('hide')+'</a>)</small>: </span>');
+		var replacement = $('<span><a class="hide-image-link"><i class="fa fa-eye-slash"></i></a></span>');
-				
+
 		replacement.find('a').click(function() {
 			if (hidden_data[board][id]) {
 				hidden_data[board][id]['ts'] = Math.round(Date.now() / 1000);
@@ -59,36 +59,36 @@ $(document).ready(function(){
 				hidden_data[board][id] = {ts: Math.round(Date.now() / 1000), index: [index]};
 			}
 			store_data();
-			
+
-			var show_link = $('<a class="show-image-link" href="javascript:void(0)">'+_('show')+'</a>').click(function() {
+			var show_link = $('<a class="show-image-link"><i class="fa fa-eye" title="'+_('show')+'"</i></a>').click(function() {
 				var i = hidden_data[board][id]['index'].indexOf(index);
 				if (i > -1) hidden_data[board][id]['index'].splice(i,1);
-				
+
 				if (hidden_data[board][id]['index'].length === 0)
 					delete hidden_data[board][id];
 				store_data();
-				
+
 				$(img)
 					.removeClass('hidden')
 					.attr('src', $(img).data('orig'));
 				$(this).prev().show();
 				$(this).remove();
 			});
-			
+
 			$(this).hide().after(show_link);
-			
+
 			if ($(img).parent().data('expanded') == 'true') {
 				$(img).parent().click();
 			}
-		
+
 			$(img)
 				.data('orig', img.src)
 				.attr('src', 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==')
 				.addClass('hidden');
 		});
-		
+
 		$(this).parent().prev().contents().first().replaceWith(replacement);
-		
+
 		if (hidden_data[board][id] && hidden_data[board][id]['index'].indexOf(index) !== -1)
 			$(this).parent().prev().find('.hide-image-link').click();
 	};

stylesheets/style.css

@@ -253,10 +253,6 @@ input.delete {
   margin-left: 0;
 }
 
-.intro a {
-  margin-left: 8px;
-}
-
 div.delete {
   float: right;
 }
@@ -952,7 +948,7 @@ span.pln {
   color: grey;
 }
 
-@media screen and (min-width: 768px) {
+@media screen and (min-width: 48em) {
   .intro {
     clear: none;
   }
@@ -1072,6 +1068,111 @@ div.boardlist a {
   width: 50px;
 }
 
+div.video-container {
+  display: block;
+  min-width: unset !important;
+  align-items: center;
+  max-width: 15%;
+}
+
+@media only screen and (max-width: 48em) {
+  /* wired-7 style_m.css plus edit by perdedora */
+  hr {
+    margin: 1em 0;
+  }
+  div.post.reply {
+    width: 100%;
+    padding: 0.5em 0px 0.5em 0.5em;
+    margin: 0;
+    max-width: 100% !important;
+    box-sizing: border-box;
+    margin: 0px;
+  }
+  div.post.reply div.body {
+    margin-inline-start: 10px;
+    margin-inline-end: 0px;
+    margin-left: initial !important;
+  }
+  .post-btn {
+    margin: 0 2px 0 2px;
+  }
+  .post-image{
+    max-width: 150px;
+    max-height: 150px;
+    object-fit: cover;
+    border-radius: 4px;
+  }
+  div.post:not(.op) div.body{
+    clear:none;
+  }
+
+  div.post .files {
+    display: inline-flex !important;
+    float:left;
+    flex-flow: row wrap;
+    align-content: space-between;
+    margin-right: 10px;
+    margin-top: 2px;
+  }
+
+  div.thread.files {
+    display: flex;
+    flex-flow: row wrap;
+    float: left;
+  }
+  div.file.multifile {
+    min-width: unset !important;
+    width: unset !important;
+  }
+
+  div.post .file {
+    width: initial !important;
+    min-width: 100px;
+  }
+
+  .full-image {
+    max-width: 100%;
+  }
+  div.video-container {
+    max-width: unset !important;
+  }
+  .intro time,
+  .name,
+  .own_post,
+  .poster_id,
+  i fa,
+  .post_no,
+  .capcode {
+    font-size: 1em;
+  }
+  .intro a:not(#reply-button) {
+    margin-left: unset !important;
+  }
+  .post-btn,
+  .hide-thread-link {
+    margin-right: 2px !important;
+  }
+  .show-image-link,
+  .hide-image-link {
+    font-size: 16px;
+    margin: 0 4px !important;
+  }
+}
+
+p.fileinfo .unimportant {
+  @media (max-width: 48em) {
+    display: none;
+  }
+}
+
+p.fileinfo span + span {
+  margin-right: 0.3em;
+}
+
+.image_id a + a {
+  margin-left: 0.3em;
+}
+
 /* File selector */
 .dropzone {
   color: #000;

templates/post/fileinfo.html

@@ -10,7 +10,7 @@
 		<p class="fileinfo">File: <a href="{{ config.uri_img }}{{ file.file }}">{{ file.file }}</a> <span class="unimportant">
 		(
 			{% if file.thumb == 'spoiler' %}
-				{% trans %}Spoiler Image{% endtrans %}, 
+				{% trans %}Spoiler Image{% endtrans %},
 			{% endif %}
 			{{ file.size|filesize }}
 			{% if file.width and file.height %}
@@ -20,7 +20,7 @@
 				{% endif %}
 			{% endif %}
 			{% if config.show_filename and file.filename %}
-				, 
+				,
 				{% if file.filename|length > config.max_filename_display %}
 					<a href="{{ config.uri_img }}{{ file.file|e|bidi_cleanup }}" download="{{ file.filename|e|bidi_cleanup }}" title="Save as original filename: {{ file.filename|e|bidi_cleanup }}">{{ file.filename|truncate_filename(config.max_filename_display)|e|bidi_cleanup }}</a>
 				{% else %}
@@ -33,6 +33,6 @@
 	{% include "post/image.html" with {'post':file} %}
 	{% endif %}
 </div>
-    {% endfor %}
+	{% endfor %}
 </div>
-    {% endif %}
+	{% endif %}

templates/post/image_identification.html

@@ -16,4 +16,4 @@
 			<a rel="noreferrer" href="https://yandex.com/images/search?url={{ config.domain }}{{ config.uri_img }}{{ file.file }}&rpt=imagelike" target="_blank">Yandex</a>
 		{% endif %}
 	</span>
-{% endif %}
+{% endif %}