Eco:Dashboard: Difference between revisions

From Eco - English Wiki
← Older edit
VisualWikitext
No edit summary
Tags: Reverted 2017 source edit
No edit summary
Tag: 2017 source edit
 
(47 intermediate revisions by the same user not shown)
Line 1: Line 1:
<div class="container-fluid">
<div class="container-fluid">
<div class="row g-3 mb-3">
                <div class="col-xxl-2 col-lg-3 col-sm-4 col-12"><div class="jumbotron">Lang [https://wiki.play.eco/Main_Page {{#language:{{CONTENTLANGUAGE}}}}]</div></div>
              <div class="col-xxl-2 col-lg-3 col-sm-4 col-12"><div class="jumbotron">Pages [[Special:AllPages|{{NUMBEROFPAGES}}]]</div></div>
              <div class="col-xxl-2 col-lg-3 col-sm-4 col-12"><div class="jumbotron">Edits [[Special:RecentChanges|{{NUMBEROFEDITS}}]]</div></div>
              <div class="col-xxl-2 col-lg-3 col-sm-4 col-12"><div class="jumbotron">Users [[Special:ActiveUsers|{{NUMBEROFACTIVEUSERS}}]] / [[Special:ListUsers|{{NUMBEROFUSERS}}]] </div></div>
              <div class="col-xxl-2 col-lg-3 col-sm-4 col-12"><div class="jumbotron">Admins  <big>{{NUMBEROFADMINS}}</big></div></div>
</div>
<div class="row align-items-md-stretch">
      <div class="col-md-6">
        <div class="h-100 p-5 text-white bg-dark rounded-3">
          <h2>Change the background</h2>
          <p>Swap the background-color utility and add a `.text-*` color utility to mix up the jumbotron look. Then, mix and match with additional component themes and more.</p>
          <button class="btn btn-outline-light" type="button">Example button</button>
        </div>
      </div>
      <div class="col-md-6">
        <div class="h-100 p-5 bg-light border rounded-3">
          <h2>Add borders</h2>
          <p>Or, keep it light and add a border for some added definition to the boundaries of your content. Be sure to look under the hood at the source HTML here as we've adjusted the alignment and sizing of both column's content for equal-height.</p>
          <button class="btn btn-outline-secondary" type="button">Example button</button>
        </div>
      </div>
    </div>
{{LMB}} {{MMB}} {{RMB}}  {{Key|Shift}} {{Key|E}}
<div class="row">
<div class="row">
<div class="col-sm">
<div class="col-sm">
<div class="card">
<div class="card">
Line 14: Line 42:


<div class="col-sm">
<div class="col-sm">
<div class="card">
<div class="card bg-dark">
   <div class="card-header">Featured</div>
   <div class="card-header">Featured</div>
   <div class="card-body">
   <div class="card-body">
Line 26: Line 54:
</div>
</div>


<div class="col-sm">
<div class="card">
  <div class="card-header">Featured</div>
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>
</div>


<div class="col-sm">
<div class="card">
  <div class="card-header">Featured</div>
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>
</div>


</div>
</div>
Line 197: Line 201:
                   </a>
                   </a>
                 </div>
                 </div>
                <div class="col-xxl-2 col-lg-3 col-sm-4 col-12">
                  <a href="#" class="tile-link d-flex align-items-center flex-column text-center rounded-2">
                    <img src="assets/images/payments.svg" class="img-3x m-auto mb-4" alt="Admin Dashboards">
                    <h5>Billing</h5>
                    <p>Manage subscribe bills</p>
                  </a>
                </div>
                <div class="col-xxl-2 col-lg-3 col-sm-4 col-12">
                  <a href="#" class="tile-link d-flex align-items-center flex-column text-center rounded-2">
                    <img src="assets/images/roles.svg" class="img-3x m-auto mb-4" alt="Admin Dashboards">
                    <h5>Roles</h5>
                    <p>Manage admin roles</p>
                  </a>
                </div>
                <div class="col-xxl-2 col-lg-3 col-sm-4 col-12">
                  <a href="#" class="tile-link d-flex align-items-center flex-column text-center rounded-2">
                    <img src="assets/images/buildings.svg" class="img-3x m-auto mb-4" alt="Admin Dashboards">
                    <h5>Buildings</h5>
                    <p>Manage building rooms</p>
                  </a>
                </div>
                <div class="col-xxl-2 col-lg-3 col-sm-4 col-12">
                  <a href="#" class="tile-link d-flex align-items-center flex-column text-center rounded-2">
                    <img src="assets/images/resources.svg" class="img-3x m-auto mb-4" alt="Admin Dashboards">
                    <h5>Resources</h5>
                    <p>Manage our resources</p>
                  </a>
                </div>
                <div class="col-xxl-2 col-lg-3 col-sm-4 col-12">
                  <a href="#" class="tile-link d-flex align-items-center flex-column text-center rounded-2">
                    <img src="assets/images/domains.svg" class="img-3x m-auto mb-4" alt="Admin Dashboards">
                    <h5>Domains</h5>
                    <p>Manage our domains</p>
                  </a>
                </div>
                <div class="col-xxl-2 col-lg-3 col-sm-4 col-12">
                  <a href="support.html" class="tile-link d-flex align-items-center flex-column text-center rounded-2">
                    <img src="assets/images/support.svg" class="img-3x m-auto mb-4" alt="Admin Dashboards">
                    <h5>Support</h5>
                    <p>Talk to tech support</p>
                  </a>
                </div>
              </div>
</div>
</div>
</div>
</div>


<div class="row align-items-md-stretch">
      <div class="col-md-6">
        <div class="h-100 p-5 text-white bg-dark rounded-3">
          <h2>Изменить фон</h2>
          <p>Поменяйте местами утилиту background-color и добавьте цветовую утилиту `.text- *`, чтобы смешать внешний вид jumbotron. Затем смешайте и сопоставьте с дополнительными темами компонентов и многим другим..</p>
          <button class="btn btn-outline-light" type="button">Пример кнопки</button>
        </div>
      </div>
      <div class="col-md-6">
        <div class="h-100 p-5 bg-light border rounded-3">
          <h2>Добавить границы</h2>
          <p>Или сделайте это светлым и добавьте границу для некоторого дополнительного определения границ вашего контента. Не забудьте заглянуть под капот на исходный HTML-код здесь, поскольку мы скорректировали выравнивание и размер содержимого обоих столбцов для одинаковой высоты.</p>
          <button class="btn btn-outline-secondary" type="button">Пример кнопки</button>
        </div>
      </div>
    </div>
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777"/></svg>
<div class="container">
<div class="carousel-caption text-start">
<h1>Пример заголовка.</h1>
<p>Некоторое репрезентативное содержимое-заполнитель для первого слайда карусели.</p>
<p><a class="btn btn-lg btn-primary" href="#">Sign up today</a></p>
</div>
</div>
</div>
<div class="carousel-item">
<svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777"/></svg>
<div class="container">
<div class="carousel-caption">
<h1>Другой пример заголовка.</h1>
<p>Некоторое репрезентативное содержимое-заполнитель для второго слайда карусели.</p>
<p><a class="btn btn-lg btn-primary" href="#">Learn more</a></p>
</div>
</div>
</div>
<div class="carousel-item">
<svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777"/></svg>
<div class="container">
<div class="carousel-caption text-end">
<h1>Еще один для хорошей меры.</h1>
<p>Некоторые репрезентативные материалы-заполнители для третьего слайда этой карусели.</p>
<p><a class="btn btn-lg btn-primary" href="#">Browse gallery</a></p>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Предыдущий</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Следующий</span>
</button>
</div>


<gallery widths=200% heights=auto perrow=4 caption="MEDIA">
[[de:Eco:Dashboard]]
File:Eco-hafen.jpg
[[fr:Eco:Dashboard]]
File:Eco-hafen.jpg
[[ru:Eco:Dashboard]]
File:Eco-hafen.jpg
File:Eco-hafen.jpg
File:Eco-hafen.jpg
File:Eco-hafen.jpg
File:Eco-hafen.jpg
File:Eco-hafen.jpg
</gallery>

Latest revision as of 09:34, 5 January 2025

Lang English
Pages 2,182
Edits 13,322
Users 2 / 1,613
Admins 4


Change the background

Swap the background-color utility and add a `.text-*` color utility to mix up the jumbotron look. Then, mix and match with additional component themes and more.

         <button class="btn btn-outline-light" type="button">Example button</button>

Add borders

Or, keep it light and add a border for some added definition to the boundaries of your content. Be sure to look under the hood at the source HTML here as we've adjusted the alignment and sizing of both column's content for equal-height.

         <button class="btn btn-outline-secondary" type="button">Example button</button>


Left mouse button Left mouse button Left mouse button Shift E

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

   <a href="#" class="btn btn-primary">Go somewhere</a>
Featured
Card title
Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

   <a href="#" class="card-link">Card link</a>
   <a href="#" class="card-link">Another link</a>




Special Pages

Data

Modules

Localization

Templates

                 <a href="contacts.html" class="tile-link d-flex align-items-center flex-column text-center rounded-2">
                   <img src="assets/images/users.svg" class="img-3x m-auto mb-4" alt="Admin Dashboards">
Users

Manage admin people

                 </a>

                 <a href="#" class="tile-link d-flex align-items-center flex-column text-center rounded-2">
                   <img src="assets/images/group.svg" class="img-3x m-auto mb-4" alt="Admin Dashboards">
Groups

Create grouping lists

                 </a>

                 <a href="dashboard5.html" class="tile-link d-flex align-items-center flex-column text-center rounded-2">
                   <img src="assets/images/dashboard.svg" class="img-3x m-auto mb-4" alt="Admin Dashboards">
Dashboard

Insights about company

                 </a>

                 <a href="#" class="tile-link d-flex align-items-center flex-column text-center rounded-2">
                   <img src="assets/images/devices.svg" class="img-3x m-auto mb-4" alt="Admin Dashboards">
Devices

Secure data devices

                 </a>

                 <a href="#" class="tile-link d-flex align-items-center flex-column text-center rounded-2">
                   <img src="assets/images/apps.svg" class="img-3x m-auto mb-4" alt="Admin Dashboards">
Apps

Manage app settings

                 </a>

                 <a href="account-settings.html" class="tile-link d-flex align-items-center flex-column text-center rounded-2">
                   <img src="assets/images/security.svg" class="img-3x m-auto mb-4" alt="Admin Dashboards">
Security

Configure security logs

                 </a>
Retrieved from "https://wiki.play.eco/en/index.php?title=Eco:Dashboard&oldid=13242"
CC BY-NC-SA 4.0
Powered by MediaWiki