adding screenshots
|
@ -2,8 +2,9 @@
|
|||
<div class="footer-copyright">
|
||||
<div class="container">
|
||||
<!--Made by <a class="orange-text text-lighten-3" href="http://github.com/streetturtle">Pavel Makhov</a>-->
|
||||
<span>Powered by
|
||||
<a class="grey-text text-lighten-4" href="http://materializecss.com/" title="MaterializeCSS"><img
|
||||
<span>Made with
|
||||
<a class="grey-text text-lighten-4" href="http://materializecss.com/"
|
||||
title="MaterializeCSS"><img
|
||||
src="{{'/assets/img/materialize-logo.png' | relative_url }}"></a> and
|
||||
<a class="grey-text text-lighten-4" href="https://jekyllrb.com/" title="Jekyll"><img
|
||||
src="{{'/assets/img/jekyll-logo.png' | relative_url }}"></a>
|
||||
|
|
|
@ -0,0 +1,22 @@
|
|||
<ul>
|
||||
<li><a class="github-button"
|
||||
href="https://github.com/streetturtle/awesome-wm-widgets/subscription"
|
||||
data-icon="octicon-eye" data-show-count="true"
|
||||
aria-label="Watch streetturtle/awesome-wm-widgets on GitHub">Watch</a></li>
|
||||
<li><a class="github-button" href="https://github.com/streetturtle/awesome-wm-widgets"
|
||||
data-icon="octicon-star" data-show-count="true"
|
||||
aria-label="Star streetturtle/awesome-wm-widgets on GitHub">Star</a></li>
|
||||
<li><a class="github-button" href="https://github.com/streetturtle/awesome-wm-widgets/fork"
|
||||
data-icon="octicon-repo-forked" data-show-count="true"
|
||||
aria-label="Fork streetturtle/awesome-wm-widgets on GitHub">Fork</a></li>
|
||||
<li><a class="github-button" href="https://github.com/streetturtle/awesome-wm-widgets/issues"
|
||||
data-icon="octicon-issue-opened" data-show-count="true"
|
||||
aria-label="Issue streetturtle/awesome-wm-widgets on GitHub">Issue</a></li>
|
||||
<li><a class="github-button"
|
||||
href="https://github.com/streetturtle/awesome-wm-widgets/archive/master.zip"
|
||||
data-icon="octicon-cloud-download"
|
||||
aria-label="Download streetturtle/awesome-wm-widgets on GitHub">Download</a></li>
|
||||
<li><a class="github-button" href="https://github.com/streetturtle"
|
||||
data-show-count="true" aria-label="Follow @streetturtle on GitHub">Follow
|
||||
@streetturtle</a></li>
|
||||
</ul>
|
|
@ -10,16 +10,16 @@
|
|||
<!--<a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>-->
|
||||
|
||||
<div class="container">
|
||||
<div id="particles-js"></div>
|
||||
<div class="site-header">
|
||||
<div id="header" class="header center white-text">
|
||||
<a href="{{ site.url | append: site.baseurl}}/"><span
|
||||
style="font-family: awesomewm-font; font-weight: 100;">awesome wm</span></a>
|
||||
</div>
|
||||
<div id="description" class="header center white-text">Set of widgets for Awesome
|
||||
Window Manager
|
||||
<div id="description" class="header center white-text">
|
||||
Set of widgets for Awesome Window Manager
|
||||
</div>
|
||||
</div>
|
||||
<div id="particles-js"></div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
@ -29,34 +29,20 @@
|
|||
|
||||
<ul class="sidenav sidenav-fixed" style="transform: translateX(0px);">
|
||||
<li><a class="subheader white-text">Widgets</a></li>
|
||||
<!--<li>-->
|
||||
<!--<div class="">-->
|
||||
<!--<span class="balck-text name">Project documentation page</span>-->
|
||||
<!--</div>-->
|
||||
<!--</li>-->
|
||||
<!--<li>-->
|
||||
<!--<div class="divider"></div>-->
|
||||
<!--</li>-->
|
||||
|
||||
{% for widget in site.widgets %}
|
||||
<li class="tab col s2 ">
|
||||
<a href="#tab{{ widget.title | replace: ' ', '_'}}">{{ widget.title }}</a>
|
||||
<a href="#tab{{ widget.title | replace: ' ', '_' }}">
|
||||
{{ widget.title | replace: 'Cpu', 'CPU' | replace: 'Ram', 'RAM'}}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
|
||||
<li>
|
||||
<div class="divider"></div>
|
||||
</li>
|
||||
<li><a class="subheader white-text">Links</a></li>
|
||||
<li><div class="divider"></div></li>
|
||||
<li><a class="subheader white-text">Links</a></li>
|
||||
|
||||
<div class="sidenav-footer">
|
||||
|
||||
<ul>
|
||||
<li><a class="github-button" href="https://github.com/streetturtle/awesome-wm-widgets"
|
||||
data-icon="octicon-star" data-count-href="/streetturtle/awesome-wm-widgets/stargazers" data-count-api="/repos/streetturtle/AwesomeWM#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star streetturtle/AwesomeWM on GitHub">Star</a></li>
|
||||
<li> <a class="github-button" href="https://github.com/streetturtle/awesome-wm-widgets/archive/master.zip" data-icon="octicon-cloud-download" aria-label="Download streetturtle/AwesomeWM on GitHub">Download</a></li>
|
||||
<li><a class="github-button" href="https://github.com/streetturtle" data-count-href="/streetturtle/followers" data-count-api="/users/streetturtle#followers" data-count-aria-label="# followers on GitHub" aria-label="Follow @streetturtle on GitHub">Follow @streetturtle</a></li>
|
||||
</ul>
|
||||
|
||||
{% include links.html %}
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
|
@ -81,6 +67,7 @@
|
|||
</main>
|
||||
{% include footer.html %}
|
||||
|
||||
|
||||
<!-- Place this tag in your head or just before your close body tag. -->
|
||||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -8,13 +8,13 @@ Simple and easy-to-install widget for Awesome Window Manager.
|
|||
This widget consists of:
|
||||
|
||||
- an icon which shows the battery level:
|
||||
![Battery Widget](./bat-wid-1.png)
|
||||
![Battery Widget]({{'/assets/img/screenshots/battery-wid-1.png' | relative_url }})
|
||||
- a pop-up window, which shows up when you hover over an icon:
|
||||
![Battery Widget](./bat-wid-2.png)
|
||||
![Battery Widget]({{'/assets/img/screenshots/battery-wid-2.png' | relative_url }})
|
||||
Alternatively you can use a tooltip (check the code):
|
||||
![Battery Widget](./bat-wid-22.png)
|
||||
![Battery Widget]({{'/assets/img/screenshots/battery-wid-22.png' | relative_url }})
|
||||
- a pop-up warning message which appears on bottom right corner when battery level is less that 15% (you can get the image [here](https://vk.com/images/stickers/1933/512.png)):
|
||||
![Battery Widget](./bat-wid-3.png)
|
||||
![Battery Widget]({{'/assets/img/screenshots/battery-wid-3.png' | relative_url }})
|
||||
|
||||
Note that widget uses the Arc icon theme, so it should be [installed](https://github.com/horst3180/arc-icon-theme#installation) first under **/usr/share/icons/Arc/** folder.
|
||||
|
||||
|
|
|
@ -6,14 +6,14 @@ layout: page
|
|||
|
||||
This widget is more informative version of [battery widget](https://github.com/streetturtle/awesome-wm-widgets/tree/master/battery-widget).
|
||||
|
||||
Depending of the battery status it could look following ways:
|
||||
Depending of the battery status it may look one of the following ways:
|
||||
|
||||
- ![10_d](./10_d.png) - less than 15 percent
|
||||
- ![10_c](./10_c.png) - less than 15 percent, charging
|
||||
- ![20_d](./20_d.png) - between 15 and 40 percent
|
||||
- ![20_c](./20_c.png) - between 15 and 40 percent, charging
|
||||
- ![80_d](./80_d.png) - more than 40 percent
|
||||
- ![80_c](./80_c.png) - more than 40 percent, charging
|
||||
- ![10_d]({{'/assets/img/screenshots/batteryarc-10_d.png' | relative_url }}) - less than 15 percent
|
||||
- ![10_c]({{'/assets/img/screenshots/batteryarc-10_c.png' | relative_url }}) - less than 15 percent, charging
|
||||
- ![20_d]({{'/assets/img/screenshots/batteryarc-20_d.png' | relative_url }}) - between 15 and 40 percent
|
||||
- ![20_c]({{'/assets/img/screenshots/batteryarc-20_c.png' | relative_url }}) - between 15 and 40 percent, charging
|
||||
- ![80_d]({{'/assets/img/screenshots/batteryarc-80_d.png' | relative_url }}) - more than 40 percent
|
||||
- ![80_c]({{'/assets/img/screenshots/batteryarc-80_c.png' | relative_url }}) - more than 40 percent, charging
|
||||
|
||||
Widget uses following beautiful variables with values:
|
||||
|
||||
|
|
|
@ -128,3 +128,42 @@ header, main, footer {
|
|||
.tab.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
.fade-in {
|
||||
opacity: 1;
|
||||
animation-name: fadeInOpacity;
|
||||
animation-iteration-count: 1;
|
||||
animation-timing-function: ease-in;
|
||||
animation-duration: 0.4s;
|
||||
}
|
||||
|
||||
@keyframes fadeInOpacity {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// scrollbar
|
||||
/* width */
|
||||
::-webkit-scrollbar {
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
::-webkit-scrollbar-track {
|
||||
background: #343434;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #171717;
|
||||
}
|
||||
|
||||
/* Handle on hover */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #202020;
|
||||
}
|
||||
|
|
After Width: | Height: | Size: 700 B |
After Width: | Height: | Size: 18 KiB |
After Width: | Height: | Size: 10 KiB |
After Width: | Height: | Size: 14 KiB |
After Width: | Height: | Size: 1.0 KiB |
After Width: | Height: | Size: 956 B |
After Width: | Height: | Size: 1.1 KiB |
After Width: | Height: | Size: 1.0 KiB |
After Width: | Height: | Size: 2.1 KiB |
After Width: | Height: | Size: 1.1 KiB |
|
@ -28,13 +28,13 @@ $(document).ready(function(){
|
|||
$(this).parents('li').addClass('active');
|
||||
|
||||
//hide displaying tab content
|
||||
$(active_tab_selector).removeClass('active');
|
||||
$(active_tab_selector).addClass('hide');
|
||||
$(active_tab_selector).removeClass('active fade-in');
|
||||
$(active_tab_selector).addClass('hide ');
|
||||
|
||||
//show target tab content
|
||||
var target_tab_selector = $(this).attr('href');
|
||||
$(target_tab_selector).removeClass('hide');
|
||||
$(target_tab_selector).addClass('active');
|
||||
$(target_tab_selector).removeClass('hide ');
|
||||
$(target_tab_selector).addClass('active fade-in');
|
||||
});
|
||||
|
||||
var hash = window.location.hash;
|
||||
|
|