adding screenshots

This commit is contained in:
streetturtle 2018-09-15 21:19:46 -04:00
parent 28897319f2
commit c5da08732a
17 changed files with 91 additions and 42 deletions

View File

@ -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>

22
_includes/links.html Normal file
View File

@ -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>

View File

@ -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>

View File

@ -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.

View File

@ -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:

View File

@ -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;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 700 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 956 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -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;