Sophia/steamwidgets-web
1
0
Fork 0
mirror of https://github.com/SophiaAtkinson/steamwidgets-web.git synced 2025-06-27 10:17:41 -07:00
Code Issues Packages Projects Releases Wiki Activity

Resolves #5

Browse Source
This commit is contained in:
Daniel Brendel
2023-03-23 00:43:02 +01:00
parent 01f9530645
commit 88c0d34409
5 changed files with 276 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
app/resources/js/app.js
View File

@ -229,10 +229,29 @@ document.addEventListener('DOMContentLoaded', function(){
window.hljs.highlightAll(); window.hljs.highlightAll();
window.onscroll = function() { window.onscroll = function() {
if ((document.body.scrollTop > document.getElementsByClassName('navbar')[0].offsetHeight + 100) || (document.documentElement.scrollTop > document.getElementsByClassName('navbar')[0].offsetHeight + 100)) { if ((document.body.scrollTop > document.getElementsByClassName('navbar')[0].offsetHeight + 10) || (document.documentElement.scrollTop > document.getElementsByClassName('navbar')[0].offsetHeight + 10)) {
document.getElementsByClassName('navbar')[0].classList.add('navbar-background-show'); document.getElementsByClassName('navbar')[0].classList.add('navbar-background-show');
} else { } else {
document.getElementsByClassName('navbar')[0].classList.remove('navbar-background-show'); document.getElementsByClassName('navbar')[0].classList.remove('navbar-background-show');
} }
}; };
const obsoptions = {
root: null,
rootMargin: '0px',
threshold: 0.7
};
const obscallback = function(entries, observer) {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.replace('fade-out', 'fade-in');
}
});
};
const observer = new IntersectionObserver(obscallback, obsoptions);
let fadeElems = document.querySelectorAll('.fade');
fadeElems.forEach(elem => observer.observe(elem));
}); });

115
app/resources/sass/app.scss
View File

@ -18,6 +18,10 @@ body {
transition: .3s ease-in-out; transition: .3s ease-in-out;
} }
.navbar-item-brand img {
border-radius: 50%;
}
.navbar-background-show { .navbar-background-show {
background-color: rgb(76, 76, 120); background-color: rgb(76, 76, 120);
} }
@ -67,6 +71,9 @@ a.navbar-burger:hover {
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
height: 550px; height: 550px;
} }
@media screen and (max-width: 441px) {
height: 685px;
}
background-color: rgb(41, 52, 62); background-color: rgb(41, 52, 62);
} }
@ -197,6 +204,27 @@ a.navbar-burger:hover {
padding: 15px; padding: 15px;
} }
.is-content {
color: rgb(200, 200, 200);
padding-bottom: 50px;
}
.is-content pre {
padding: unset;
margin-top: -15px;
margin-bottom: -61px;
background-color: unset;
}
.is-content code {
border-radius: 12px;
box-shadow: 0 4px 2px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19);
}
.is-highlight {
font-size: 1.5em;
}
tbody { tbody {
color: rgb(150, 150, 150); color: rgb(150, 150, 150);
} }
@ -341,4 +369,89 @@ tbody strong {
@media screen and (max-width: 1087px) { @media screen and (max-width: 1087px) {
display: none; display: none;
} }
} }
.fade {
transition: opacity 0.65s ease-in;
}
.fade-in {
opacity: 1;
}
.fade-out {
opacity: 0;
}
.widget-types {
text-align: center;
}
.widget-type {
position: relative;
display: inline-block;
width: 150px;
height: 150px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 15px;
padding-top: 59px;
padding-bottom: 50px;
background-color: rgb(50, 51, 76);
border-radius: 12px;
border-left: 3px solid rgb(74, 123, 163);
box-shadow: 0 4px 2px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19);
font-size: 1.2em;
text-align: center;
}
.is-centered {
text-align: center;
}
.is-sidepadding {
padding-left: 20px;
padding-right: 20px;
}
.padding-top-cdn {
padding-top: 48px;
}
.padding-top-npm {
padding-top: 45px;
}
.button-get-started {
margin-top: 50px;
margin-bottom: 50px;
}
.button-get-started a {
display: inline-block;
width: 305px;
height: 65px;
background-color: rgb(50, 115, 220);
color: rgb(250, 250, 250);
border-radius: 5px;
padding-top: 8px;
font-size: 2.0em;
}
.button-get-started a:hover {
background-color: rgb(63, 123, 220);
color: rgb(250, 250, 250);
text-decoration: none;
}
.is-widescreen {
@media screen and (max-width: 769px) {
display: none !important;
}
}
.is-smallscreen {
@media screen and (min-width: 768px) {
display: none !important;
}
}

2
app/views/header.php
View File

@ -16,7 +16,7 @@
</div> </div>
<div class="header-buttons"> <div class="header-buttons">
<span><a href="#readmore" class="button is-info is-outlined">Read More</a></span> <span><a href="#readmore" class="button is-info is-outlined" onclick="document.querySelector('[name=readmore]').scrollIntoView({behavior: 'smooth'}); return false;">Read More</a></span>
<span><a href="{{ url('/documentation') }}" class="button is-primary is-outlined">Documentation</a></span> <span><a href="{{ url('/documentation') }}" class="button is-primary is-outlined">Documentation</a></span>
</div> </div>
</div> </div>

163
app/views/index.php
View File

@ -2,32 +2,149 @@
<a name="readmore"></a><br/><br/> <a name="readmore"></a><br/><br/>
</div> </div>
<div class="columns"> <div class="columns is-content">
<div class="column is-half"> <div class="column is-half">
Lorem Ipsum Dolor Sit Amet. <div class="is-highlight is-sidepadding fade fade-out">
Lorem Ipsum Dolor Sit Amet. Create responsive, localizable and adjustable widgets for various Steam entities
Lorem Ipsum Dolor Sit Amet. very easily with only few code.
Lorem Ipsum Dolor Sit Amet. </div>
Lorem Ipsum Dolor Sit Amet.
Lorem Ipsum Dolor Sit Amet.
Lorem Ipsum Dolor Sit Amet.
Lorem Ipsum Dolor Sit Amet.
Lorem Ipsum Dolor Sit Amet.
Lorem Ipsum Dolor Sit Amet.
Lorem Ipsum Dolor Sit Amet.
</div> </div>
<div class="column is-half"> <div class="column is-half">
Lorem Ipsum Dolor Sit Amet. <div class="is-sidepadding fade fade-out">
Lorem Ipsum Dolor Sit Amet. <pre>
Lorem Ipsum Dolor Sit Amet. <code class="language-html">
Lorem Ipsum Dolor Sit Amet. &lt;steam-app appid="{{ env('APP_EXAMPLE_APP') }}"&gt;&lt;/steam-app&gt;
Lorem Ipsum Dolor Sit Amet. </code>
Lorem Ipsum Dolor Sit Amet. </pre>
Lorem Ipsum Dolor Sit Amet. </div>
Lorem Ipsum Dolor Sit Amet. </div>
Lorem Ipsum Dolor Sit Amet. </div>
Lorem Ipsum Dolor Sit Amet.
Lorem Ipsum Dolor Sit Amet. <div class="columns is-content is-widescreen">
<div class="column is-half">
<div class="is-sidepadding fade fade-out">
<pre>
<code class="language-js">
let widget = new SteamApp('#app-widget', {
appid: '{{ env('APP_EXAMPLE_APP') }}',
//... and more
});
</code>
</pre>
</div>
</div>
<div class="column is-half">
<div class="is-highlight is-sidepadding fade fade-out">
Use JavaScript to control your Widgets for various situations.
Set various options on initialization and perform operatings
on various events later.
</div>
</div>
</div>
<div class="columns is-content is-smallscreen">
<div class="column is-half">
<div class="is-highlight is-sidepadding fade fade-out">
Use JavaScript to control your Widgets for various situations.
Set various options on initialization and perform operatings
on various events later.
</div>
</div>
<div class="column is-half">
<div class="is-sidepadding fade fade-out">
<pre>
<code class="language-js">
let widget = new SteamApp('#app-widget', {
appid: '{{ env('APP_EXAMPLE_APP') }}',
//... and more
});
</code>
</pre>
</div>
</div>
</div>
<div><hr/></div>
<div class="content-section">
<h3>Use widgets for the following Steam entities</h3>
<div class="widget-types">
<div class="widget-type fade fade-out">
Game/App
</div>
<div class="widget-type fade fade-out">
Workshop
</div>
<div class="widget-type fade fade-out">
Group
</div>
<div class="widget-type fade fade-out">
Player
</div>
<div class="widget-type fade fade-out">
Gameserver
</div>
</div>
</div>
<div><hr/></div>
<div class="columns is-content">
<div class="column is-half">
<div class="is-highlight is-sidepadding fade fade-out padding-top-cdn">
You can use {{ env('APP_NAME') }} via our CDN for quick usages.
</div>
</div>
<div class="column is-half">
<div class="is-sidepadding fade fade-out is-centered">
<i class="fas fa-server fa-10x"></i>
</div>
</div>
</div>
@if (env('APP_SHOWNPMUSAGE', false))
<div class="columns is-content is-widescreen">
<div class="column is-half">
<div class="is-sidepadding fade fade-out is-centered">
<i class="fab fa-npm fa-10x"></i>
</div>
</div>
<div class="column is-half">
<div class="is-highlight is-sidepadding fade fade-out padding-top-npm">
You can also use {{ env('APP_NAME') }} via Node.js Package Manager
</div>
</div>
</div>
<div class="columns is-content is-smallscreen">
<div class="column is-half">
<div class="is-highlight is-sidepadding fade fade-out padding-top-npm">
You can also use {{ env('APP_NAME') }} via Node.js Package Manager
</div>
</div>
<div class="column is-half">
<div class="is-sidepadding fade fade-out is-centered">
<i class="fab fa-npm fa-10x"></i>
</div>
</div>
</div>
@endif
<div><hr/></div>
<div class="content-section is-centered">
<div class="is-sidepadding button-get-started fade fade-out">
<a href="{{ url('/documentation') }}">Get Started!</a>
</div> </div>
</div> </div>

2
public/js/app.js
View File

File diff suppressed because one or more lines are too long