mirror of
https://github.com/openclassify/openclassify.git
synced 2026-01-11 18:01:10 -06:00
blog design for base-theme
This commit is contained in:
Metehan Celik
parent
b485e08175
commit
a3bfd9f5c8
@ -43,6 +43,10 @@ return [
|
|||||||
'login_with_phone_number' => 'Login with Phone Number',
|
'login_with_phone_number' => 'Login with Phone Number',
|
||||||
'login_with_email_address' => 'Login with Email Address',
|
'login_with_email_address' => 'Login with Email Address',
|
||||||
|
|
||||||
|
// Share
|
||||||
|
'share_on_facebook' => 'Share on Facebook',
|
||||||
|
'share_on_twitter' => 'Share on Twitter',
|
||||||
|
|
||||||
// Side menu links
|
// Side menu links
|
||||||
'company_directory' => 'Company directory',
|
'company_directory' => 'Company directory',
|
||||||
'popular_ads' => 'Popular Ads',
|
'popular_ads' => 'Popular Ads',
|
||||||
@ -51,6 +55,9 @@ return [
|
|||||||
'sms' => 'Send Text Message (SMS)',
|
'sms' => 'Send Text Message (SMS)',
|
||||||
'mail' => 'Send Mail',
|
'mail' => 'Send Mail',
|
||||||
|
|
||||||
|
//Related
|
||||||
|
'related_posts' => 'Related Posts',
|
||||||
|
|
||||||
// Register instruction seed
|
// Register instruction seed
|
||||||
'register_instructions' => 'Register Instructions',
|
'register_instructions' => 'Register Instructions',
|
||||||
'list' => 'List',
|
'list' => 'List',
|
||||||
|
|||||||
@ -43,6 +43,10 @@ return [
|
|||||||
'login_with_phone_number' => 'Telefon Numarası ile Giriş',
|
'login_with_phone_number' => 'Telefon Numarası ile Giriş',
|
||||||
'login_with_email_address' => 'E-posta Adresi ile Giriş',
|
'login_with_email_address' => 'E-posta Adresi ile Giriş',
|
||||||
|
|
||||||
|
// Share
|
||||||
|
'share_on_facebook' => 'Facebook\'ta Paylaş',
|
||||||
|
'share_on_twitter' => 'Twitter\'da Paylaş',
|
||||||
|
|
||||||
// Side menu links
|
// Side menu links
|
||||||
'company_directory' => 'Firma Rehberi',
|
'company_directory' => 'Firma Rehberi',
|
||||||
'popular_ads' => 'Popüler İlanlar',
|
'popular_ads' => 'Popüler İlanlar',
|
||||||
@ -51,6 +55,8 @@ return [
|
|||||||
'sms' => 'Kısa Mesaj Gönder (SMS)',
|
'sms' => 'Kısa Mesaj Gönder (SMS)',
|
||||||
'mail' => 'E-posta Gönder',
|
'mail' => 'E-posta Gönder',
|
||||||
|
|
||||||
|
//Related
|
||||||
|
'related_posts' => 'İlgili İçerikler',
|
||||||
// Register instruction seed
|
// Register instruction seed
|
||||||
'register_instructions' => 'Kayıt Talimatları',
|
'register_instructions' => 'Kayıt Talimatları',
|
||||||
'list' => 'Liste',
|
'list' => 'Liste',
|
||||||
|
|||||||
152
addons/default/visiosoft/base-theme/resources/scss/post.scss
Normal file
152
addons/default/visiosoft/base-theme/resources/scss/post.scss
Normal file
@ -0,0 +1,152 @@
|
|||||||
|
vedat.social {
|
||||||
|
display: flex;
|
||||||
|
.icon {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border: .5px solid #f4f4f4;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin: 0 5px;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.productImage {
|
||||||
|
max-height: 700px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bgSpecial_2 {
|
||||||
|
background-color: #516eab;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bgSpecial_3 {
|
||||||
|
background-color: #29c5f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bgSpecial_4 {
|
||||||
|
background-color: #eb4026;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bgSpecial_5 {
|
||||||
|
background-color: #ca212a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paddingSpecial {
|
||||||
|
padding: 13px;
|
||||||
|
margin: 5px 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.positionSpecial {
|
||||||
|
position: relative;
|
||||||
|
top: -100px;
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// POST LIST
|
||||||
|
.textBlack {
|
||||||
|
color: black;
|
||||||
|
&:hover {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bannerImage_2 {
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 235px;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.lineGap_2 {
|
||||||
|
width: 100%;
|
||||||
|
height: 2px;
|
||||||
|
background: #fa0f19;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bgForLight {
|
||||||
|
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
|
||||||
|
z-index: 99999;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.z-index {
|
||||||
|
z-index: 9999999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fs-17px {
|
||||||
|
font-size: 17px;
|
||||||
|
@media (max-width:992px) {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bgSpecial_6 {
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ImageWidth {
|
||||||
|
max-width: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-fit {
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fs-26 {
|
||||||
|
font-size: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fs-10 {
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-zero {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-zero {
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slick-arrow {
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slick-next {
|
||||||
|
right: -40px;
|
||||||
|
@media (max-width: 768px){
|
||||||
|
right: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.slick-prev {
|
||||||
|
left: -40px;
|
||||||
|
z-index: 9999999;
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
left: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.slick-prev:before,
|
||||||
|
.slick-next:before {
|
||||||
|
color: black;
|
||||||
|
font-size: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
2771
addons/default/visiosoft/base-theme/resources/scss/style.scss
Executable file
2771
addons/default/visiosoft/base-theme/resources/scss/style.scss
Executable file
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,95 @@
|
|||||||
|
{% extends layout('posts') %}
|
||||||
|
|
||||||
|
{% block styles %}
|
||||||
|
{{ asset_style("visiosoft.theme.base::scss/post.scss") }}
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
|
<div class="continer p-0 m-0 maxWidth bg-white mx-auto">
|
||||||
|
{% set posts = entries('posts').recent().paginate() %}
|
||||||
|
|
||||||
|
<div class="row p-4 m-0">
|
||||||
|
{% for post in posts %}
|
||||||
|
<a href="{{ post.route('view') }}" class="col-xl-4 col-lg-6 col-md-12 col-12 text-decoration-none my-3">
|
||||||
|
<div class="bannerImage_2 position-relative">
|
||||||
|
{{ img( post.cover_photo.make.url ?? 'visiosoft.theme.base::images/no-image.png')
|
||||||
|
.class('w-100')|raw }}
|
||||||
|
<span class="p-1 fs-12 bgSpecial_6 position-absolute left-zero bottom-zero text-white">
|
||||||
|
{{ post.category.name }}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="h3 my-2 fw-400 textBlack single-line">
|
||||||
|
{{ post.title }}
|
||||||
|
</div>
|
||||||
|
<div class="h6 my-2 fw-400 text-muted single-line">
|
||||||
|
{{ post.summary }}
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% set selectedCats = setting_value('visiosoft.theme.hepsiemlak::list_cats') %}
|
||||||
|
{% for selectedCat in selectedCats %}
|
||||||
|
<div class="container p-0 m-0 maxWidth bg-white mx-auto">
|
||||||
|
{% set posts = entries('posts').where('category_id', selectedCat).recent().paginate() %}
|
||||||
|
{% if posts|length %}
|
||||||
|
<div class="row p-4 p-0 m-0">
|
||||||
|
<div class="col-12 my-4">
|
||||||
|
<div class="fs-18 font-weight-bold text-uppercase">{{ posts.first.category.name }}</div>
|
||||||
|
<div class="lineGap_2 mt-1"></div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-8 col-12">
|
||||||
|
<div class="position-relative w-fit shadow-sm">
|
||||||
|
<a href="{{ posts.first.route('view') }}">
|
||||||
|
{{ img( posts.first.image.make.url ?? 'visiosoft.theme.base::images/no-image.png')
|
||||||
|
.class('w-100')|raw }}
|
||||||
|
<div class="bgForLight"></div>
|
||||||
|
<div class="d-flex flex-column position-absolute p-4 bottom-zero left-zero z-index">
|
||||||
|
<div class="text-uppercase bgSpecial_6 fs-12 text-white w-fit p-1 font-weight-bold px-2">
|
||||||
|
{{ posts.first.category.name }}
|
||||||
|
</div>
|
||||||
|
<div class="text-white fs-26">{{ posts.first.title.value }}</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-4 col-12 mt-md-0 mt-4">
|
||||||
|
|
||||||
|
{% for post in posts|slice(1, 3) %}
|
||||||
|
{% if loop.first %}
|
||||||
|
<div class="position-relative w-fit shadow-sm">
|
||||||
|
<a href="{{ post.route('view') }}">
|
||||||
|
{{ img( post.image.make.url ?? 'visiosoft.theme.base::images/no-image.png').class('w-100')|raw }}
|
||||||
|
<div class="bgForLight"></div>
|
||||||
|
<div class="d-flex flex-column position-absolute p-4 bottom-zero left-zero z-index">
|
||||||
|
<div class="text-white fs-17px">{{ post.title }}</div>
|
||||||
|
<div class="text-capitalize bg-white mt-2 fs-10 textBlack w-fit p-1 px-2">
|
||||||
|
{{ post.category.name }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{% else %}
|
||||||
|
<div class="d-flex my-3">
|
||||||
|
<a href="{{ post.route('view') }}" class="d-flex text-dark">
|
||||||
|
{{ img( post.image.make.url ?? 'visiosoft.theme.base::images/no-image.png')
|
||||||
|
.class('ImageWidth mr-3 w-100')|raw }}
|
||||||
|
<div class="d-flex flex-column">
|
||||||
|
<div class="text-capitalize fw-500 fs-13">{{ post.title }}</div>
|
||||||
|
<div class="text-capitalize bgSpecial_6 mt-2 fs-10 text-white w-fit p-1 px-2">
|
||||||
|
{{ post.category.name }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
{{ posts.links|raw }}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
{% endblock %}
|
||||||
@ -0,0 +1,66 @@
|
|||||||
|
{% extends layout('posts') %}
|
||||||
|
|
||||||
|
{% block styles %}
|
||||||
|
{{ asset_style("visiosoft.theme.base::scss/post.scss") }}
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
|
<div class="container m-0 p-0 mx-auto maxWidht w-100">
|
||||||
|
<div class="row p-0 m-0">
|
||||||
|
<div class="col-12 position-relative">
|
||||||
|
<div class="productImage">
|
||||||
|
{{ img(post.cover_photo.make.url).class('w-100')|raw }}
|
||||||
|
</div>
|
||||||
|
<div class="px-md-4 px-0 p-md-3 p-0 {{ post.cover_photo ? 'positionSpecial' }} w-100">
|
||||||
|
<div class="bg-white p-3 px-4">
|
||||||
|
<h1>{{ post.title }}</h1>
|
||||||
|
<div class="mt-4 d-flex flex-md-row flex-column">
|
||||||
|
<a href="https://www.facebook.com/sharer/sharer.php?u={{ app.request.uri|url_encode }}"
|
||||||
|
class="d-flex align-items-center bgSpecial_2 text-white paddingSpecial mr-2 text-decoration-none">
|
||||||
|
<i class="fab fa-facebook-f fs-14"></i>
|
||||||
|
<div class="lineGap mx-3"></div>
|
||||||
|
<div class="fs-11 ">{{ trans('theme::field.share_on_facebook') }}</div>
|
||||||
|
</a>
|
||||||
|
<a href="https://twitter.com/share?url={{ app.request.uri|url_encode }}"
|
||||||
|
class="d-flex align-items-center bgSpecial_3 text-white paddingSpecial mr-2 text-decoration-none">
|
||||||
|
<i class="fab fa-twitter"></i>
|
||||||
|
<div class="lineGap mx-3"></div>
|
||||||
|
<div class="fs-11 ">{{ trans('theme::field.share_on_twitter') }}</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="fs-14 mt-3">{{ post.content|raw }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="container m-0 p-0 mx-auto mt-5">
|
||||||
|
<div class="row p-0 m-0">
|
||||||
|
<h5 class="text-danger mb-0 text-uppercase">
|
||||||
|
{{ trans('theme::field.related_posts') }}
|
||||||
|
</h5>
|
||||||
|
<div class="w-100 border border-danger mb-3"></div>
|
||||||
|
<div class="post-slider mx-auto w-100">
|
||||||
|
{% if entries('posts','types').findBySlug('default') %}
|
||||||
|
{% set posts = entries('posts').where('slug', '!=', post.slug).type('default').live().limit(5).get() %}
|
||||||
|
{% for post in posts %}
|
||||||
|
<a href="{{ post.route('view') }}"
|
||||||
|
class="col-3 fs-14 product p-0 mr-3 rounded position-relative bg-white link-dark text-decoration-none">
|
||||||
|
<div class="product-img">
|
||||||
|
{{ img( post.cover_photo.make.url ?? 'visiosoft.theme.base::images/no-image.png') }}
|
||||||
|
</div>
|
||||||
|
<div class="product-text-area p-3">
|
||||||
|
<div class="fw-500 text-dark single-line">
|
||||||
|
{{ post.title }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
{% endfor %}
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
||||||
Loading…
Reference in New Issue
Block a user