Skip to content

Commit

Permalink
Some improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@akhmadullin
akhmadullin committed Sep 24, 2024
1 parent ab6dc17 commit ce5a8bb
Show file tree
Hide file tree
Showing 5 changed files with 172 additions and 30 deletions.
7 changes: 7 additions & 0 deletions demos/popover-top-layer/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,5 +75,12 @@ <h3>Кажется, ваш браузер не поддерживает Popover
Я manual поповер. Тоже нахожусь на top layer.
</div>
</div>
<script>
const autoPopover = document.querySelector('#auto');
const manualPopover = document.querySelector('#manual');

manualPopover?.showPopover();
autoPopover?.showPopover();
</script>
</body>
</html>
Binary file added images/mem-buben-5-x2.jpeg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/mem-prised-x2.jpeg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/open-ui.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
195 changes: 165 additions & 30 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,27 +28,6 @@
format("woff2");
}

@font-face {
font-family: 'TTTravels';
font-weight: 400;
src: url(./fonts/TTTravels/TTTravels-Regular.woff)
format("woff");
}

@font-face {
font-family: 'TTTravels';
font-weight: 700;
src: url(./fonts/TTTravels/TTTravels-Bold.woff)
format("woff");
}

@font-face {
font-family: 'TTTravels';
font-weight: 900;
src: url(./fonts/TTTravels/TTTravels-Black.woff)
format("woff");
}

:root {
--text-color: #000000;
}
Expand Down Expand Up @@ -112,12 +91,10 @@
.slide h2 {
color: var(--text-color);
font-family: 'Montserrat', sans-serif;
/* font-family: 'TTTravels', sans-serif; */
}

.shower {
font: 25px/2 'Montserrat', sans-serif;
/* font: 25px/2 'TTTravels', sans-serif; */
}

#intro::after,
Expand Down Expand Up @@ -196,7 +173,6 @@
}

.end-bio {
/* margin-top: -20px; */
}

.slide .end-bio__title {
Expand Down Expand Up @@ -315,11 +291,11 @@ <h2>Элемент dialog<br>и атрибут popover.<br>Инструкции

<section class="slide" style="background: #bdcade">
<img src="./images/roma-a-compressed.jpg" alt="" class="place l" style="max-height: 600px">
<div class="place r" style="padding: 55px;
<div class="place r" style="padding: 35px 55px 20px;
background: hsla(0, 0%, 100%, 0.55);
border-radius: 30px;
margin-right: 42px;
margin-top: 10px;">
margin-top: 20px;">
<h2>Рома Ахмадуллин</h2>
<ul>
<li>фронтенд-разработчик в Дроме</li>
Expand Down Expand Up @@ -384,7 +360,7 @@ <h2 class="place large-heading">Меню</h2>
</section>

<section class="slide slide_yellow">
<h2 class="place large-heading">Всплывающие нотификации</h2>
<h2 class="place large-heading centered-text">Всплывающие нотификации</h2>
</section>

<section class="slide">
Expand All @@ -409,7 +385,7 @@ <h2 class="place large-heading">Сайдбар</h2>
</section> -->

<section class="slide slide_yellow">
<h2 class="place large-heading">Диалоговые окна</h2>
<h2 class="place large-heading centered-text" style="width: 100%;">Диалоговые окна</h2>
</section>

<!-- <section class="slide">
Expand Down Expand Up @@ -897,11 +873,11 @@ <h2 class="centered-text" style="line-height: 1.3;">
</section>

<section class="slide">
<img src="./images/mem-prised.jpg" alt="" class="place" style="max-height: 50%;" />
<img src="./images/mem-prised-x2.jpeg" alt="" class="place" style="max-height: 50%;" />
</section>

<section class="slide">
<img src="./images/mem-buben-1.jpg" alt="" class="place" style="max-height: 50%;" />
<img src="./images/mem-buben-5-x2.jpeg" alt="" class="place" style="max-height: 50%;" />
</section>

<!-- custom таблица - заполняем вынос на верхний слой -->
Expand Down Expand Up @@ -2791,6 +2767,10 @@ <h2 class="place slide_title centered-text">Что по характеристи
</table>
</div>
</section>

<section class="slide">
<iframe src="./demos/popover-top-layer/index.html" class="cover width height"></iframe>
</section>

<section class="slide">
<img src="./images/screen-devtools-popover-top-layer.jpg" alt="" class="cover">
Expand Down Expand Up @@ -4179,6 +4159,61 @@ <h2 class="place slide_title">Как на практике использова
<iframe src="https://akhmadullin.github.io/dialog-and-popover-use-cases" class="cover width height"></iframe>
</section>

<section class="slide">
<h2 class="place slide_title centered-text">Что дальше?</h2>
</section>

<section class="slide">
<div class="place">
<img src="./images/open-ui.png" alt="" style="height: 200px;">
<p class="centered-text" style="font-size: 2em; margin-top: -30px;">Open UI</p>
</div>

</section>

<section class="slide">
<h2 class="place slide_title centered-text">Invoker Commands</h2>
</section>

<section class="slide">
<pre class="place">
<code class="language-html">
&lt;!-- Пример возможного синтаксиса --&gt;
&lt;button
command="show-modal"
commandfor="my-dialog"
&gt;
Открыть диалог
&lt;/button&gt;

&lt;dialog id="my-dialog"&gt;
...
&lt;/dialog&gt;
</code>
</pre>
<a href="https://open-ui.org/components/invokers.explainer/" class="copyright">Эксплейнер для Invoker Commands</a>
</section>

<section class="slide">
<h2 class="place slide_title centered-text">Interest Invokers</h2>
</section>

<section class="slide">
<pre class="place">
<code class="language-html">
&lt;!-- Пример возможного синтаксиса --&gt;
&lt;button interesttarget="my-popover"&gt;
Показать поповер
&lt;/button&gt;

&lt;div id="my-popover" popover&gt;
Контент поповера
&lt;/div&gt;
</code>
</pre>
<a href="https://open-ui.org/components/interest-invokers.explainer/" class="copyright">Эксплейнер для Interest Invokers</a>
</section>

<section class="slide">
<h2 class="place slide_title centered-text">Подведем итоги</h2>
</section>
Expand Down Expand Up @@ -5359,6 +5394,106 @@ <h2 class="place slide_title centered-text">Что разные подходы
<h2 class="place slide_title centered-text">Что когда использовать?</h2>
</section>

<!-- сводная таблица - заполненная -->
<section class="slide slide_with-table">
<div class="diz-table-wrapper">
<table class="diz-my-table">
<thead>
<tr>
<th rowspan="2" class="fixed-cell vertical-alinged-top">Характеристика</th>
<th rowspan="2" class="vertical-alinged-top">Кастом</th>
<th colspan="2">Dialog</th>
<th colspan="2">Popover</th>
</tr>
<tr>
<th>show()</th>
<th>showModal()</th>
<th>auto</th>
<th>manual</th>
</tr>
</thead>
<tbody>
<tr>
<td class="fixed-cell">Привязка к якорю</td>
<td>❌</td>
<td>❌</td>
<td>❌</td>
<td>❌</td>
<td>❌</td>
</tr>
<tr>
<td class="fixed-cell">Внешний вид</td>
<td>❌</td>
<td>❌</td>
<td>❌</td>
<td>❌</td>
<td>❌</td>
</tr>
<tr>
<td class="fixed-cell">Оверлей</td>
<td>❌</td>
<td>❌</td>
<td>✅</td>
<td>✅</td>
<td>✅</td>
</tr>
<tr>
<td class="fixed-cell">Явное закрытие</td>
<td>❌</td>
<td>✅</td>
<td>✅</td>
<td>✅</td>
<td>✅</td>
</tr>
<tr>
<td class="fixed-cell">Неявное закрытие</td>
<td>❌</td>
<td>❌</td>
<td>❌</td>
<td>✅</td>
<td>❌</td>
</tr>
<tr>
<td class="fixed-cell">Закрытие на Escape</td>
<td>❌</td>
<td>❌</td>
<td>✅</td>
<td>✅</td>
<td>❌</td>
</tr>
<tr>
<td class="fixed-cell">Focus trap</td>
<td>❌</td>
<td>❌</td>
<td>✅</td>
<td>❌</td>
<td>❌</td>
</tr>
<tr>
<td class="fixed-cell">Top layer</td>
<td>❌</td>
<td>❌</td>
<td>✅</td>
<td>✅</td>
<td>✅</td>
</tr>
<tr>
<td class="fixed-cell">Семантика / a11y</td>
<td>❌</td>
<td>✅</td>
<td>✅</td>
<td>❌</td>
<td>❌</td>
</tr>
</tbody>
</table>
</div>
</section>

<section class="slide">
<h2 class="place slide_title centered-text">Инструкция из трёх шагов</h2>
</section>

<section class="slide">
<h2 class="place slide_title centered-text">Нужна поддержка старых браузеров?</h2>
</section>
Expand Down

0 comments on commit ce5a8bb

Please sign in to comment.