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

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

@ -3,129 +3,134 @@
{% block title_ruler %}{% endblock %}
{% block media %}
<style>
@media(min-width: 800px) {
#content {
width: 98%;
margin-left: 0;
}
.middle-right-content {
margin-left: 13%;
display: inline-flex;
}
<style>
@media(min-width: 800px) {
#content {
width: 98%;
margin-left: 0;
}
@media(max-width: 799px) {
#content {
width: 100%;
margin-left: 0;
}
.middle-right-content {
display: block;
}
.middle-right-content {
margin-left: 13%;
display: inline-flex;
}
</style>
}
@media(max-width: 799px) {
#content {
width: 100%;
margin-left: 0;
}
.middle-right-content {
display: block;
}
}
</style>
{% endblock %}
{% block js_media %}
<script type="text/javascript">
function activateBlogBoxOnClick() {
$('.blog-box').on('click', function() {
var $description = $(this).children('.blog-description');
var max_height = $description.css('max-height');
if (max_height !== 'fit-content') {
$description.css('max-height', 'fit-content');
$(this).css('cursor', 'auto');
$(this).removeClass('pre-expand-blog');
}
})
$('.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');
<script type="text/javascript">
function activateBlogBoxOnClick() {
$('.blog-box').on('click', function () {
var $description = $(this).children('.blog-description');
var max_height = $description.css('max-height');
if (max_height !== 'fit-content') {
$description.css('max-height', 'fit-content');
$(this).css('cursor', 'auto');
$(this).removeClass('pre-expand-blog');
$(this).find('.actionbar').show();
}
$('.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));
})
})
$('.blog-box').each(function () {
if ($(this).prop('scrollHeight') > $(this).height()) {
$(this).addClass('pre-expand-blog');
$(this).css('cursor', 'pointer');
$(this).find('.actionbar').hide();
}
}
$(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 %}
{% 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">
<span class="sidebar-icon"><i class="{{ fa }}"></i></span>
<span>{{ text }}</span>
</div>
<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>{{ text }}</span>
</div>
{% endmacro %}
{% block body %}
{% block before_posts %}{% endblock %}
<div id="three-col-container">
{% block left_sidebar %}{% endblock %}
<div class="middle-right-content">
{% block three_col_media %}{% endblock %}
{% block three_col_js %}{% endblock %}
<div class="middle-content">
{% block middle_title %}{% endblock %}
{% block middle_content %}{% endblock %}
</div>
{% block right_sidebar %}{% endblock %}
{% block before_posts %}{% endblock %}
<div id="three-col-container">
{% block left_sidebar %}{% endblock %}
<div class="middle-right-content">
{% block three_col_media %}{% endblock %}
{% block three_col_js %}{% endblock %}
<div class="middle-content">
{% block middle_title %}{% endblock %}
{% block middle_content %}{% endblock %}
</div>
{% block right_sidebar %}{% endblock %}
</div>
{% block after_posts %}{% endblock %}
</div>
{% block after_posts %}{% endblock %}
{% endblock %}
{% block bodyend %}
{{ super() }}
{% if REQUIRE_JAX %}
{% include "mathjax-load.html" %}
{% endif %}
{% include "comments/math.html" %}
{% endblock %}
{{ super() }}
{% if REQUIRE_JAX %}
{% include "mathjax-load.html" %}
{% endif %}
{% include "comments/math.html" %}
{% endblock %}