ariska/djangocms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Ariska Budijuwono
2024-11-20 12:54:11 +07:00
parent 523680a350
commit bb5c579630
2136 changed files with 597821 additions and 8689 deletions
Download Patch File Download Diff File Expand all files Collapse all files

352
static/admin/assets/pug/pages/theme/avatars.pug Normal file
View File

@@ -0,0 +1,352 @@
- var theme_customizer = true;
- var sidebar = true;
- var slick = true;
- var header_slider = true;
- var animate = true;
- var scrollbar = true;
- var prism = true;
- var clipboard = true;
- var customcard = true;
- var height_equal = true;
doctype html
html(lang='en')
include ../../components/header-files
body
include ../../components/loader
include ../../components/taptop
// page-wrapper Start
#pageWrapper.page-wrapper.compact-wrapper
include ../../components/header
// Page Body Start
.page-body-wrapper
include ../../components/sidebar
.page-body
.container-fluid
.page-title
.row
.col-6
h4
| Avatars
.col-6
ol.breadcrumb
li.breadcrumb-item
a(href='index.html')
svg.stroke-icon
use(href='../assets/svg/icon-sprite.svg#stroke-home')
li.breadcrumb-item Ui Kits
li.breadcrumb-item.active Avatars
// Container-fluid starts
.container-fluid
.user-profile
.row
.col-xl-4.col-md-6
.card.height-equal
.card-header
h4.mb-0 Sizes
p.mb-0.mt-1
| You can change the size of avatar using
code .img- * (70/80/90/100)
| class.
.card-header-right
ul.list-unstyled.card-option
li
i.fa.fa-spin.fa-cog
li
i.view-html.fa.fa-code
li
i.icofont.icofont-maximize.full-card
li
i.icofont.icofont-minus.minimize-card
li
i.icofont.icofont-refresh.reload-card
li
i.icofont.icofont-error.close-card
.card-body.avatar-showcase
.avatars
div.avatar
img.img-100.rounded-circle(src='../assets/images/avtar/3.jpg', alt='#')
div.avatar
img.img-90.rounded-circle(src='../assets/images/avtar/4.jpg', alt='#')
div.avatar
img.img-80.rounded-circle(src='../assets/images/avtar/7.jpg', alt='#')
div.avatar
img.img-70.rounded-circle(src='../assets/images/avtar/11.jpg', alt='#')
.code-box-copy
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#avatar-size', title='Copy')
i.icofont.icofont-copy-alt
pre
code.language-html#avatar-size
| <!--You can use img-* class through change the size of avatar (70/80/90/100).-->
|<div class="avatar">
|<img class="img-100 rounded-circle" src="../assets/images/avtar/3.jpg" alt="#">
|</div>
|<div class="avatar">
|<img class="img-90 rounded-circle" src="../assets/images/avtar/4.jpg" alt="#">
|</div>
|<div class="avatar">
|<img class="img-80 rounded-circle" src="../assets/images/avtar/7.jpg" alt="#">
|</div>
|<div class="avatar">
|<img class="img-70 rounded-circle" src="../assets/images/avtar/11.jpg" alt="#">
|</div>
.col-xl-4.col-md-6
.card.height-equal
.card-header
h4.mb-0 Status Indicator
p.mb-0.mt-1
| Using
code .status-* (online/offline/dnd)
| class you can set the status of avatar.
.card-header-right
ul.list-unstyled.card-option
li
i.fa.fa-spin.fa-cog
li
i.view-html.fa.fa-code
li
i.icofont.icofont-maximize.full-card
li
i.icofont.icofont-minus.minimize-card
li
i.icofont.icofont-refresh.reload-card
li
i.icofont.icofont-error.close-card
.card-body.avatar-showcase
.avatars
div.avatar
img.img-100.rounded-circle(src='../assets/images/user/1.jpg', alt='#')
.status.status-online
div.avatar
img.img-90.rounded-circle(src='../assets/images/avtar/16.jpg', alt='#')
.status.status-dnd
div.avatar
img.img-80.rounded-circle(src='../assets/images/avtar/7.jpg', alt='#')
.status.status-offline
div.avatar
img.img-70.rounded-circle(src='../assets/images/avtar/3.jpg', alt='#')
.status.status-online
.code-box-copy
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#avatar-indicator', title='Copy')
i.icofont.icofont-copy-alt
pre
code.language-html#avatar-indicator
|<!-- You can use status-* class through the set status (online/offline/dnd). -->
|<div class="avatar">
|<img class="img-100 rounded-circle" src="../assets/images/user/1.jpg" alt="#">
|<div class="status status-online"></div>
|</div>
|<div class="avatar">
|<img class="img-90 rounded-circle" src="../assets/images/avtar/16.jpg" alt="#">
|<div class="status status-dnd"></div>
|</div>
|<div class="avatar"><img class="img-80 rounded-circle" src="../assets/images/avtar/7.jpg" alt="#">
|<div class="status status-offline"></div>
|</div>
|<div class="avatar"><img class="img-70 rounded-circle" src="../assets/images/avtar/3.jpg" alt="#">
|<div class="status status-online"></div>
|</div>
.col-xl-4.col-md-6
.card.height-equal
.card-header
h4 Shapes
p.mb-0.mt-1
| Using the
code .b-r-* (8/30/35/25)
| class you can set the shapes of avatar.
.card-header-right
ul.list-unstyled.card-option
li
i.fa.fa-spin.fa-cog
li
i.view-html.fa.fa-code
li
i.icofont.icofont-maximize.full-card
li
i.icofont.icofont-minus.minimize-card
li
i.icofont.icofont-refresh.reload-card
li
i.icofont.icofont-error.close-card
.card-body.avatar-showcase
.avatars
div.avatar
img.img-100.b-r-8(src='../assets/images/avtar/4.jpg', alt='#')
div.avatar
img.img-90.b-r-30(src='../assets/images/avtar/16.jpg', alt='#')
div.avatar
img.img-80.b-r-35(src='../assets/images/avtar/3.jpg', alt='#')
div.avatar
img.img-70.rounded-circle(src='../assets/images/avtar/11.jpg', alt='#')
.code-box-copy
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#avatar-shapes', title='Copy')
i.icofont.icofont-copy-alt
pre
code.language-html#avatar-shapes
|<!-- Give the shape to avatar using .b-r-* class. (8/25/30/35). -->
|<div class="avatar">
|<img class="img-100 b-r-8" src="../assets/images/avtar/4.jpg" alt="#">
|</div>
|<div class="avatar">
|<img class="img-90 b-r-30" src="../assets/images/avtar/16.jpg" alt="#">
|</div>
|<div class="avatar">
|<img class="img-80 b-r-35" src="../assets/images/avtar/3.jpg" alt="#">
|</div>
|<div class="avatar">
|<img class="img-70 rounded-circle" src="../assets/images/avtar/11.jpg" alt="#">
|</div>
.col-md-6
.card.height-equal
.card-header
h4 Ratio
p.mb-0.mt-1
| Give the shape to avatar using
code .ratio
| and
code img-* (50/70/80/90/100)
| class.
.card-header-right
ul.list-unstyled.card-option
li
i.fa.fa-spin.fa-cog
li
i.view-html.fa.fa-code
li
i.icofont.icofont-maximize.full-card
li
i.icofont.icofont-minus.minimize-card
li
i.icofont.icofont-refresh.reload-card
li
i.icofont.icofont-error.close-card
.card-body.avatar-showcase
.avatars
div.avatar.ratio
img.b-r-8.img-100(src='../assets/images/avtar/11.jpg', alt='#')
div.avatar.ratio
img.b-r-8.img-90(src='../assets/images/avtar/4.jpg', alt='#')
div.avatar.ratio
img.b-r-8.img-80(src='../assets/images/user/1.jpg', alt='#')
div.avatar.ratio
img.b-r-8.img-70(src='../assets/images/avtar/16.jpg', alt='#')
div.avatar.ratio
img.b-r-8.img-50(src='../assets/images/avtar/7.jpg', alt='#')
.code-box-copy
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#avatar-ratio', title='Copy')
i.icofont.icofont-copy-alt
pre
code.language-html#avatar-ratio
|<!-- You can use b-r-* class through the set status (100/90/80/70/50). -->
|<div class="avatars">
|<div class="avatar ratio">
|<img class="b-r-8 img-100" src="../assets/images/avtar/11.jpg" alt="#">
|</div>
|<div class="avatar ratio">
|<img class="b-r-8 img-90" src="../assets/images/avtar/4.jpg" alt="#">
|</div>
|<div class="avatar ratio">
|<img class="b-r-8 img-80" src="../assets/images/user/1.jpg" alt="#">
|</div>
|<div class="avatar ratio">
|<img class="b-r-8 img-70" src="../assets/images/avtar/16.jpg" alt="#">
|</div>
|<div class="avatar ratio">
|<img class="b-r-8 img-50" src="../assets/images/avtar/7.jpg" alt="#">
|</div>
.col-xl-6
.card.height-equal
.card-header
h4 Grouping
p.mb-0.mt-1
| You can set the group of avatars like
code .img-* (40/50/60/80/100)
| and
code .b-r-* (8/30/35)
| .
.card-header-right
ul.list-unstyled.card-option
li
i.fa.fa-spin.fa-cog
li
i.view-html.fa.fa-code
li
i.icofont.icofont-maximize.full-card
li
i.icofont.icofont-minus.minimize-card
li
i.icofont.icofont-refresh.reload-card
li
i.icofont.icofont-error.close-card
.card-body.avatar-showcase
.avatars
.customers.d-inline-block.avatar-group
ul
li.d-inline-block
img.img-100.b-r-8(src='../assets/images/avtar/4.jpg', alt='#')
li.d-inline-block
img.img-80.b-r-30(src='../assets/images/avtar/16.jpg', alt='#')
li.d-inline-block
img.img-50.b-r-35(src='../assets/images/avtar/3.jpg', alt='#')
.customers.d-inline-block.avatar-group
ul
li.d-inline-block
img.img-60.rounded-circle(src='../assets/images/avtar/16.jpg', alt='#')
li.d-inline-block
img.b-r-8.img-80(src='../assets/images/user/1.jpg', alt='#')
li.d-inline-block
img.img-60.rounded-circle(src='../assets/images/avtar/16.jpg', alt='#')
.customers.d-inline-block.avatar-group
ul
li.d-inline-block
img.img-40.rounded-circle(src='../assets/images/user/3.jpg', alt='')
li.d-inline-block
img.img-40.rounded-circle(src='../assets/images/user/5.jpg', alt='')
li.d-inline-block
img.img-40.rounded-circle(src='../assets/images/user/1.jpg', alt='')
.code-box-copy
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#avatar-grouping', title='Copy')
i.icofont.icofont-copy-alt
pre
code.language-html#avatar-grouping
|<!-- You can set the group of avatars use img-* and .b-r-* class (40/50/60/80/100) and (8/30/35). -->
|<div class="customers d-inline-block avatar-group">
|<ul>
|<li class="d-inline-block">
|<img class="img-100 b-r-8" src="../assets/images/avtar/4.jpg" alt="#">
|</li>
|<li class="d-inline-block">
|<img class="img-80 b-r-30" src="../assets/images/avtar/16.jpg" alt="#">
|</li>
|<li class="d-inline-block">
|</li><img class="img-50 b-r-35" src="../assets/images/avtar/3.jpg" alt="#">
|</ul>
|</div>
|<div class="customers d-inline-block avatar-group">
|<ul>
|<li class="d-inline-block">
|<img class="img-60 rounded-circle" src="../assets/images/avtar/16.jpg" alt="#">
|</li>
|<li class="d-inline-block">
|<img class="b-r-8 img-80" src="../assets/images/user/1.jpg" alt="#">
|</li>
|<li class="d-inline-block">
|<img class="img-60 rounded-circle" src="../assets/images/avtar/16.jpg" alt="#">
|</li>
|</ul>
|</div>
|<div class="customers d-inline-block avatar-group">
|<ul>
|<li class="d-inline-block">
|<img class="img-40 rounded-circle" src="../assets/images/user/3.jpg" alt="">
|</li>
|<li class="d-inline-block">
|<img class="img-40 rounded-circle" src="../assets/images/user/5.jpg" alt="">
|</li>
|<li class="d-inline-block">
|<img class="img-40 rounded-circle" src="../assets/images/user/1.jpg" alt="">
|</li>
|</ul>
// Container-fluid Ends
include ../../components/footer
include ../../components/footer-files