lkva/NDOJ
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #52 from zhaospei/master

Browse source 
Fix pre-expand-blog css
This commit is contained in:
Phuoc Dinh Le 2023-02-04 07:37:46 -06:00 committed by GitHub
commit d519c41802
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 153 additions and 113 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
resources/blog.scss
View file

@ -32,7 +32,8 @@
} }
} }
.blog-sidebar, .right-sidebar { .blog-sidebar,
.right-sidebar {
width: 100%; width: 100%;
margin-left: auto; margin-left: auto;
} }
@ -41,6 +42,7 @@
color: green; color: green;
font-weight: bold; font-weight: bold;
background-color: lightgreen; background-color: lightgreen;
.sidebar-icon { .sidebar-icon {
color: green; color: green;
} }
@ -157,17 +159,21 @@
padding-bottom: 1em; padding-bottom: 1em;
clear: both; clear: both;
} }
.problem-feed-name { .problem-feed-name {
display: inline; display: inline;
font-weight: bold; font-weight: bold;
} }
.problem-feed-name a { .problem-feed-name a {
color: #0645ad; color: #0645ad;
} }
.problem-feed-info-entry { .problem-feed-info-entry {
display: inline; display: inline;
float: right; float: right;
} }
.problem-feed-types { .problem-feed-types {
color: gray; color: gray;
} }
@ -175,24 +181,30 @@
.left-sidebar-item { .left-sidebar-item {
display: flex; display: flex;
align-items: center; align-items: center;
.sidebar-icon { .sidebar-icon {
font-size: large; font-size: large;
display: inline-block; display: inline-block;
i { i {
width: 1.4em; width: 1.4em;
} }
} }
} }
.left-sidebar-item:hover { .left-sidebar-item:hover {
background-color: #e3e3e3; background-color: #e3e3e3;
cursor: pointer; cursor: pointer;
} }
.left-sidebar-item.active:hover { .left-sidebar-item.active:hover {
background-color: lightgreen; background-color: lightgreen;
} }
.sidebar-icon { .sidebar-icon {
color: black; color: black;
} }
.left-sidebar-header { .left-sidebar-header {
text-align: center; text-align: center;
padding-bottom: 1em; padding-bottom: 1em;
@ -200,13 +212,27 @@
color: black; color: black;
border-radius: 0; border-radius: 0;
} }
.feed-table { .feed-table {
margin: 0; margin: 0;
} }
.pre-expand-blog { .pre-expand-blog {
background-image: -webkit-linear-gradient(bottom, gray, lightgray 3%, transparent 8%, transparent 100%); position: relative;
padding-bottom: 0; padding-bottom: 0;
} }
.pre-expand-blog::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
background-image: -webkit-linear-gradient(bottom, gray, lightgray 3%, transparent 8%, transparent 100%);
border-radius: 8px;
}
.pre-expand-blog:hover { .pre-expand-blog:hover {
background-color: #f3f3f3; background-color: #f3f3f3;
} }
@ -224,35 +250,43 @@
.left-sidebar-header { .left-sidebar-header {
display: none; display: none;
} }
.left-sidebar-item { .left-sidebar-item {
padding: 0.8em 0.2em 0.8em 0.2em; padding: 0.8em 0.2em 0.8em 0.2em;
display: inline-block; display: inline-block;
flex: 1; flex: 1;
border-radius: 8px; border-radius: 8px;
.sidebar-icon { .sidebar-icon {
display: none; display: none;
} }
} }
.left-sidebar { .left-sidebar {
text-align: center; text-align: center;
margin-bottom: 1em; margin-bottom: 1em;
border-radius: 7px; border-radius: 7px;
display: flex; display: flex;
} }
.blog-box { .blog-box {
padding-left: 5%; padding-left: 5%;
padding-right: 5%; padding-right: 5%;
} }
.post-title { .post-title {
font-size: 2em; font-size: 2em;
} }
} }
@media (min-width: 800px) { @media (min-width: 800px) {
.left-sidebar-item { .left-sidebar-item {
padding: 0.8em 0.2em 0.8em 1em; padding: 0.8em 0.2em 0.8em 1em;
} }
.middle-content, .blog-sidebar, .right-sidebar {
.middle-content,
.blog-sidebar,
.right-sidebar {
display: block !important; display: block !important;
} }
@ -274,7 +308,8 @@
width: -webkit-fill-available; width: -webkit-fill-available;
} }
.blog-sidebar, .right-sidebar { .blog-sidebar,
.right-sidebar {
width: 25%; width: 25%;
} }
@ -313,4 +348,4 @@
font-size: 2.5em; font-size: 2.5em;
} }
} }
} }

219
templates/three-column-content.html
View file

@ -3,129 +3,134 @@
{% block title_ruler %}{% endblock %} {% block title_ruler %}{% endblock %}
{% block media %} {% block media %}
<style> <style>
@media(min-width: 800px) { @media(min-width: 800px) {
#content { #content {
width: 98%; width: 98%;
margin-left: 0; margin-left: 0;
}
.middle-right-content {
margin-left: 13%;
display: inline-flex;
}
} }
@media(max-width: 799px) {
#content { .middle-right-content {
width: 100%; margin-left: 13%;
margin-left: 0; display: inline-flex;
}
.middle-right-content {
display: block;
}
} }
</style> }
@media(max-width: 799px) {
#content {
width: 100%;
margin-left: 0;
}
.middle-right-content {
display: block;
}
}
</style>
{% endblock %} {% endblock %}
{% block js_media %} {% block js_media %}
<script type="text/javascript"> <script type="text/javascript">
function activateBlogBoxOnClick() { function activateBlogBoxOnClick() {
$('.blog-box').on('click', function() { $('.blog-box').on('click', function () {
var $description = $(this).children('.blog-description'); var $description = $(this).children('.blog-description');
var max_height = $description.css('max-height'); var max_height = $description.css('max-height');
if (max_height !== 'fit-content') { if (max_height !== 'fit-content') {
$description.css('max-height', 'fit-content'); $description.css('max-height', 'fit-content');
$(this).css('cursor', 'auto'); $(this).css('cursor', 'auto');
$(this).removeClass('pre-expand-blog'); $(this).removeClass('pre-expand-blog');
} $(this).find('.actionbar').show();
})
$('.blog-box').each(function() {
if ($(this).prop('scrollHeight') > $(this).height() ) {
$(this).addClass('pre-expand-blog');
$(this).css('cursor', 'pointer');
}
});
}
function navigateTo($elem, update_sidebar=false) {
var url = $elem.attr('data-href') || $elem.attr('href');
if (url === '#') return;
if (update_sidebar) {
$('.left-sidebar-item').removeClass('active');
$elem.addClass('active');
} }
$('.middle-right-content').html(loading_page); })
$.get(url, function(data) { $('.blog-box').each(function () {
var reload_content = $(data).find('.middle-right-content'); if ($(this).prop('scrollHeight') > $(this).height()) {
$(this).addClass('pre-expand-blog');
if (reload_content.length) { $(this).css('cursor', 'pointer');
window.history.pushState("", "", url); $(this).find('.actionbar').hide();
$('.middle-right-content').html(reload_content.first().html());
$(document).prop('title', $(data).filter('title').text());
MathJax.typeset($('.middle-right-content')[0]);
onWindowReady();
activateBlogBoxOnClick();
$('.xdsoft_datetimepicker').hide();
registerNavigation();
}
else {
window.location.href = url;
}
});
}
function registerNavigation() {
const links = ['.pagination a', '.tabs li a', '.problem-feed-option a'];
for (link of links) {
$(link).on('click', function(e) {
e.preventDefault();
navigateTo($(this));
})
} }
}
$(function () {
window.addEventListener('popstate', (e) => {
window.location.href = e.currentTarget.location.href;
});
activateBlogBoxOnClick();
$('.left-sidebar-item').on('click', function() {
navigateTo($(this), true);
});
registerNavigation();
}); });
</script> }
function navigateTo($elem, update_sidebar = false) {
var url = $elem.attr('data-href') || $elem.attr('href');
if (url === '#') return;
if (update_sidebar) {
$('.left-sidebar-item').removeClass('active');
$elem.addClass('active');
}
$('.middle-right-content').html(loading_page);
$.get(url, function (data) {
var reload_content = $(data).find('.middle-right-content');
if (reload_content.length) {
window.history.pushState("", "", url);
$('.middle-right-content').html(reload_content.first().html());
$(document).prop('title', $(data).filter('title').text());
MathJax.typeset($('.middle-right-content')[0]);
onWindowReady();
activateBlogBoxOnClick();
$('.xdsoft_datetimepicker').hide();
registerNavigation();
}
else {
window.location.href = url;
}
});
}
function registerNavigation() {
const links = ['.pagination a', '.tabs li a', '.problem-feed-option a'];
for (link of links) {
$(link).on('click', function (e) {
e.preventDefault();
navigateTo($(this));
})
}
}
$(function () {
window.addEventListener('popstate', (e) => {
window.location.href = e.currentTarget.location.href;
});
activateBlogBoxOnClick();
$('.left-sidebar-item').on('click', function () {
navigateTo($(this), true);
});
registerNavigation();
});
</script>
{% endblock %} {% endblock %}
{% macro make_tab_item(name, fa, url, text) %} {% macro make_tab_item(name, fa, url, text) %}
<div class="left-sidebar-item {% if page_type == name %}active{% endif %}" data-href="{{ url }}" id="{{ name }}-tab"> <div class="left-sidebar-item {% if page_type == name %}active{% endif %}" data-href="{{ url }}" id="{{ name }}-tab">
<span class="sidebar-icon"><i class="{{ fa }}"></i></span> <span class="sidebar-icon"><i class="{{ fa }}"></i></span>
<span>{{ text }}</span> <span>{{ text }}</span>
</div> </div>
{% endmacro %} {% endmacro %}
{% block body %} {% block body %}
{% block before_posts %}{% endblock %} {% block before_posts %}{% endblock %}
<div id="three-col-container"> <div id="three-col-container">
{% block left_sidebar %}{% endblock %} {% block left_sidebar %}{% endblock %}
<div class="middle-right-content"> <div class="middle-right-content">
{% block three_col_media %}{% endblock %} {% block three_col_media %}{% endblock %}
{% block three_col_js %}{% endblock %} {% block three_col_js %}{% endblock %}
<div class="middle-content"> <div class="middle-content">
{% block middle_title %}{% endblock %} {% block middle_title %}{% endblock %}
{% block middle_content %}{% endblock %} {% block middle_content %}{% endblock %}
</div>
{% block right_sidebar %}{% endblock %}
</div> </div>
{% block right_sidebar %}{% endblock %}
</div> </div>
{% block after_posts %}{% endblock %} </div>
{% block after_posts %}{% endblock %}
{% endblock %} {% endblock %}
{% block bodyend %} {% block bodyend %}
{{ super() }} {{ super() }}
{% if REQUIRE_JAX %} {% if REQUIRE_JAX %}
{% include "mathjax-load.html" %} {% include "mathjax-load.html" %}
{% endif %} {% endif %}
{% include "comments/math.html" %} {% include "comments/math.html" %}
{% endblock %} {% endblock %}