Removed fitty.js, using manual font-size setting instead. Fixed valid/expired posts check.

This commit is contained in:
2017-09-16 13:06:44 +07:00
parent d06921fcc8
commit 6cb980051c
6 changed files with 83 additions and 66 deletions

View File

@@ -5,7 +5,7 @@
{% block body %}
<main class="documentation">
<section>
<h1>Pengumuman {{ post.id }}</h1>
<h1>Ubah Pengumuman</h1>
<form method="post">
<div class="flex five grow">

View File

@@ -13,7 +13,7 @@
{% endif %}
<a href="/logout" class="navy button" data-tooltip="Keluar"><i class="fa fa-sign-out" aria-hidden="true"></i>&nbsp;Keluar</a>
{% else %}
<a href="/login" class="navy hidden-hover" data-tooltip="Masuk">
<a href="/login" class="navy hidden-hover button" data-tooltip="Masuk">
<i class="fa fa-sign-in" aria-hidden="true"></i>&nbsp;Masuk
</a>
{% endif %}
@@ -26,14 +26,14 @@
{% if privilege == "" %}
{% if not posts %}
<div style="background:#fff;text-align:left;width:100vw;padding:10vh 0 0;">
<h1 class="fitty">Tidak ada pengumuman</h1>
<div style="background:#fff;text-align:left;max-width:100vw;padding:10vh 0 0;">
<h1 class="fitty pengumuman">Tidak ada pengumuman</h1>
</div>
{% else %}
<div id="slidr-div">
{% for post in posts %}
<div data-slidr="{{ post.id }}" style="color:{{ post.foreground }};background-color:{{ post.background }};width:100%;height:100vh;padding:15vh 0;">
<div class="fitty" style="padding:0 5rem">
<div data-slidr="{{ post.id }}" style="color:{{ post.foreground }};background-color:{{ post.background }};width:100vw;height:100vh;">
<div style="padding:15vh 0">
{{ post.content|rendermd }}
</div>
</div>
@@ -45,10 +45,10 @@
<div style="background:#fff;text-align:left;width:100vw;padding:10vh 0 0;">
<div class="filter flex six-600 four grow">
<div class="sixth-600 none"></div>
<a href="/" class="navy noFitty">Semua</a>
<a href="/?status=1" class="navy noFitty">Aktif</a>
<a href="/?status=2" class="navy noFitty">Belum Aktif</a>
<a href="/?status=0" class="navy noFitty">Nonaktif</a>
<a href="/" class="navy" style="font-size:smaller;">Semua</a>
<a href="/?status=1" class="navy" style="font-size:smaller;">Aktif</a>
<a href="/?status=2" class="navy" style="font-size:smaller;">Belum Aktif</a>
<a href="/?status=0" class="navy" style="font-size:smaller;">Nonaktif</a>
<div class="sixth-600 none"></div>
</div>
<div class="flex four-900 full card-wrapper" style="padding: 0 .6em;">
@@ -91,6 +91,7 @@
<div class="half-900">
<input type="hidden" name="id" value="{{ post.id }}">
<input type="hidden" name="valid_at" value="##date##">
<input type="hidden" name="status" value="1">
<!-- Method -->
<input type="hidden" name="_method" value="put">
<!-- Token -->
@@ -112,16 +113,6 @@
</main>
<script>
fitty('.fitty', {
minSize: 120,
maxSize: 700
});
fitty('.noFitty', {
minSize: 15,
maxSize: 15
});
slidr.create('slidr-div', {
controls: false,
timing: {'linear': '0.5s ease-in'},

View File

@@ -64,12 +64,28 @@
.fitty {
display: inline-block;
white-space: nowrap;
white-space: normal;
line-height: 1em;
padding-bottom: .1em;
text-align: center;
}
#slidr-div p {
margin: 0;
text-align: center;
line-height: 1;
}
@media screen and (orientation: landscape) {
#slidr-div p {
font-size: 8vw;
}
}
@media screen and (orientation: portrait) {
#slidr-div p {
font-size: 10vh;
}
}
.title {
font-family: 'Lobster', cursive;
font-size: x-large;
@@ -139,6 +155,14 @@
.fitty > p {
margin: 0;
}
nav {
max-width: 100vw;
}
.pengumuman {
width: 100%;
}
</style>
</head>
<body>
@@ -149,7 +173,6 @@
{% block nav %}{% endblock %}
</nav>
<script src="/js/rome.js"></script>
<script src="/js/fitty.min.js"></script>
<script src="/js/slidr.min.js"></script>
<script src="/js/simplemde.min.js"></script>
{% block body %}
@@ -170,6 +193,5 @@
}, 50);
}
</script>
</body>
</html>