fixed adaptive

This commit is contained in:
Alexander Karpov 2023-04-14 10:23:48 +03:00
parent 4966884646
commit e56f64afc6
6 changed files with 10 additions and 10 deletions

View File

@ -11,7 +11,7 @@ def view(file: File) -> (str, str):
<meta property="og:video:height" content="480" /> <meta property="og:video:height" content="480" />
<link href="https://vjs.zencdn.net/8.0.4/video-js.css" rel="stylesheet" /> <link href="https://vjs.zencdn.net/8.0.4/video-js.css" rel="stylesheet" />
""" """
data = """"playbackRates": [0.5, 1, 1.5, 2], "responsive": true }""" data = """{"playbackRates": [0.5, 1, 1.5, 2], "responsive": true, "fit": true, "fluid": true }"""
content = f""" content = f"""
<video id="my_video_1" class="video-js vjs-default-skin" height="500px" <video id="my_video_1" class="video-js vjs-default-skin" height="500px"

View File

@ -11,10 +11,10 @@ def view(file: File) -> (str, str):
<meta property="og:video:height" content="480" /> <meta property="og:video:height" content="480" />
<link href="https://vjs.zencdn.net/8.0.4/video-js.css" rel="stylesheet" /> <link href="https://vjs.zencdn.net/8.0.4/video-js.css" rel="stylesheet" />
""" """
data = """"playbackRates": [0.5, 1, 1.5, 2], "responsive": true }""" data = """{"playbackRates": [0.5, 1, 1.5, 2], "responsive": true, "fit": true, "fluid": true }"""
content = f""" content = f"""
<video id="my_video_1" class="video-js vjs-default-skin" height="500px" <video id="my_video_1" class="video-js vjs-default-skin"
controls poster='{file.preview.url if file.preview else ''}' controls poster='{file.preview.url if file.preview else ''}'
data-setup='{data}'> data-setup='{data}'>
<source src="{file.file.url}" type='{file.file_type}' /> <source src="{file.file.url}" type='{file.file_type}' />

View File

@ -507,7 +507,7 @@ p {
} }
.sidebar { .sidebar {
max-height: 15%; max-height: 7%;
} }
@media (min-width: 576px) { @media (min-width: 576px) {

View File

@ -33,7 +33,7 @@
<body> <body>
<div class="container-fluid"> <div class="container-fluid">
<div class="row vh-100 overflow-auto"> <div class="row vh-100 overflow-auto">
<div class="sidebar col-12 col-sm-3 col-xl-1 px-sm-2 px-0 bg-dark d-flex sticky-top"> <div class="sidebar col-12 col-lg-2 col-sm-3 col-md-2 col-xl-1 px-sm-2 px-0 bg-dark d-flex sticky-top">
<div class="d-flex flex-sm-column flex-row flex-grow-1 align-items-center align-items-sm-start px-3 pt-2 text-white"> <div class="d-flex flex-sm-column flex-row flex-grow-1 align-items-center align-items-sm-start px-3 pt-2 text-white">
<a href="/" class="d-flex align-items-center pb-sm-3 mb-md-0 me-md-auto text-white text-wrap text-decoration-none"> <a href="/" class="d-flex align-items-center pb-sm-3 mb-md-0 me-md-auto text-white text-wrap text-decoration-none">
<span class="fs-5">A<span class="d-none d-sm-inline">karpov</span></span> <span class="fs-5">A<span class="d-none d-sm-inline">karpov</span></span>
@ -97,8 +97,8 @@
</div> </div>
</div> </div>
</div> </div>
<div id="body" class="col d-flex flex-column h-sm-100"> <div id="body" class="col-xl-11 col-lg-10 col-md-9 col-sm-9 col-12 d-flex align-self-start justify-content-start flex-column h-100">
<main class="row overflow-aut px-lg-4"> <main class="px-lg-4 row overflow-auto">
<div class="col pt-4"> <div class="col pt-4">
{% if messages %} {% if messages %}
{% for message in messages %} {% for message in messages %}

View File

@ -9,7 +9,7 @@
{% endif %} {% endif %}
<div class="row mb-2"> <div class="row mb-2">
{% for post in post_list %} {% for post in post_list %}
<div class="col-md-6 col-xl-12"> <div class="col-12">
<div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative blog-cards"> <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative blog-cards">
<div class="col p-4 d-flex flex-column position-static"> <div class="col p-4 d-flex flex-column position-static">
<strong style="color: {{ post.h_tag.color }}" class="d-inline-block mb-2">{{ post.h_tag.name }}</strong> <strong style="color: {{ post.h_tag.color }}" class="d-inline-block mb-2">{{ post.h_tag.name }}</strong>

View File

@ -9,7 +9,7 @@
{% block content %} {% block content %}
<div class="row m-2"> <div class="row m-2">
<h1 class="fs-1 text-break mb-4">{{ file.name }}</h1> <h1 class="fs-1 text-break mb-4">{{ file.name }}</h1>
<div class="col-md-4 col-sm-6 col-xs-auto"> <div class="col-md-4 col-sm-6 col-xs-auto mb-5">
{% if not has_perm %} {% if not has_perm %}
<p>Uploaded by: <a href="{% url 'users:detail' file.user.username %}"> <p>Uploaded by: <a href="{% url 'users:detail' file.user.username %}">
{% if file.user.image_cropped %}<img class="rounded" width="20" src="{{ file.user.image_cropped.url }}" alt=""> {% endif %} {% if file.user.image_cropped %}<img class="rounded" width="20" src="{{ file.user.image_cropped.url }}" alt=""> {% endif %}
@ -39,7 +39,7 @@
{% endif %} {% endif %}
</div> </div>
</div> </div>
<div class="col-md-8 col-sm-10 col-xs-auto"> <div class="col-md-8 col-sm-10 col-xs-auto mt-xs-4">
{% autoescape off %} {% autoescape off %}
{{ preview_content }} {{ preview_content }}
{% endautoescape %} {% endautoescape %}