diff --git a/app/config/routes.php b/app/config/routes.php index 08aafe6..ecd5f07 100644 --- a/app/config/routes.php +++ b/app/config/routes.php @@ -17,6 +17,7 @@ return [ array('/', 'GET', 'index@index'), + array('/documentation', 'GET', 'index@documentation'), array('/api/query/app', 'GET', 'api@queryAppInfo'), array('/api/query/server', 'GET', 'api@queryServerInfo'), array('/api/query/user', 'GET', 'api@queryUserInfo'), diff --git a/app/controller/index.php b/app/controller/index.php index 833d357..c79a04d 100644 --- a/app/controller/index.php +++ b/app/controller/index.php @@ -25,6 +25,20 @@ class IndexController extends BaseController { public function index($request) { //Generate and return a view by using the helper - return parent::view(['content', 'index']); + return parent::view(['content', 'index'], [ + 'show_header' => true + ]); + } + + /** + * Handles URL: /documentation + * + * @param Asatru\Controller\ControllerArg $request + * @return Asatru\View\ViewHandler + */ + public function documentation($request) + { + //Generate and return a view by using the helper + return parent::view(['content', 'doc']); } } diff --git a/app/resources/js/app.js b/app/resources/js/app.js index be94823..d2224dd 100644 --- a/app/resources/js/app.js +++ b/app/resources/js/app.js @@ -227,4 +227,12 @@ window.hljs = hljs; document.addEventListener('DOMContentLoaded', function(){ window.hljs.highlightAll(); + + window.onscroll = function() { + if ((document.body.scrollTop > document.getElementsByClassName('navbar')[0].offsetHeight + 100) || (document.documentElement.scrollTop > document.getElementsByClassName('navbar')[0].offsetHeight + 100)) { + document.getElementsByClassName('navbar')[0].classList.add('navbar-background-show'); + } else { + document.getElementsByClassName('navbar')[0].classList.remove('navbar-background-show'); + } + }; }); \ No newline at end of file diff --git a/app/resources/sass/app.scss b/app/resources/sass/app.scss index 26f4c67..f64d083 100644 --- a/app/resources/sass/app.scss +++ b/app/resources/sass/app.scss @@ -14,7 +14,12 @@ body { } .navbar { - background-color: rgba(255, 255, 255, 0.0); + background-color: transparent; + transition: .3s ease-in-out; +} + +.navbar-background-show { + background-color: rgb(76, 76, 120); } a.navbar-item:hover, a.navbar-item.is-active, .navbar-link:hover, .navbar-link.is-active { @@ -48,7 +53,6 @@ a.navbar-burger:hover { @media screen and (min-width: 1088px) { flex-grow: 1; justify-content: center; - transform: translate(11%, -0%) } } @@ -59,15 +63,58 @@ a.navbar-burger:hover { .header { width: 100%; - height: 320px; - background-repeat: no-repeat; - background-size: cover; + height: 750px; + @media screen and (max-width: 768px) { + height: 550px; + } + background-color: rgb(41, 52, 62); } .header-overlay { width: 100%; height: 100%; - background-color: rgba(0, 0, 0, 0.5); +} + +.header-content { + position: relative; + top: 50%; + @media screen and (min-width: 769px) { + transform: translateY(-15%); + } + padding: 20px; + @media screen and (max-width: 1088px) { + margin-top: 58px; + } +} + +.header-content h1 { + font-size: 2.0em; +} + +.header-content h2 { + font-size: 1.8em; + color: rgba(00, 255, 135, 0.7); +} + +.header-description { + margin-top: 20px; + color: rgb(230, 230, 230); +} + +.header-buttons { + margin-top: 30px; +} + +.header-gradient { + background-image: linear-gradient(90deg, rgb(57, 115, 209), rgb(49, 231, 134)); + background-clip: text; + color: transparent; + display: inline-block; +} + +.header-image { + width: 65%; + height: 100%; } .content-section { @@ -288,4 +335,10 @@ tbody strong { .steam-workshop-info-footer-action a:hover { color: rgb(250, 250, 250) !important; text-decoration: none !important; +} + +.hide-mobile { + @media screen and (max-width: 1087px) { + display: none; + } } \ No newline at end of file diff --git a/app/views/doc.php b/app/views/doc.php new file mode 100644 index 0000000..533bde5 --- /dev/null +++ b/app/views/doc.php @@ -0,0 +1,878 @@ +
+

+ +

Documentation

+ +
+ +

Prerequisites

+ +

+ {{ env('APP_NAME') }} is a clientside web component that offers an easy way to integrate Steam Widgets of various Steam + entities into your website. Therefore you only need very few code in order to render Steam Widgets into your document. +

+ +

+ {{ env('APP_NAME') }} is used via JavaScript. Since JavaScript is supported by all major browser per default it is + platform independent and compatible. +

+ +

+ The following Widgets are currently available:
+ +

+

+ +

+ You can use {{ env('APP_NAME') }} by referencing the neccessary JavaScript files from the official {{ env('APP_NAME') }} server as follows:
+ + 

+			
+<script src="{{ Utils::url('/api/resource/query?type=js&module=STEAM_WIDGETS_MODULE&version=v1') }}"></script>
+			
+
+ +
+ + STEAM_WIDGETS_MODULE can either be app for the Steam App widget, server for the Steam Server widget, + user for the Steam User widget, workshop for the Steam Workshop widget or group for the Steam Group widget. +

+ + @if (env('APP_SHOWNPMUSAGE', false)) +

+ You can also use NPM to install the package. Please visit the NPM page of the package in order to get instruction details:
+
+ +

+ NPM package: {{ env('APP_NPMPACKAGEURL') }} +
+

+ @endif + +
+
+ +
+ + +

Steam App

+ +

+ When referenced the required Steam App module, the minimum code to render a widget is as follows:
+ 

+			
+<steam-app appid="{{ env('APP_EXAMPLE_APP') }}"></steam-app>
+			
+
+ +

+ This renders the following widget:
+ +

+ +

+
You can define these options:
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributeValue
appidSpecifies the ID of a Steam game/app
langSpecifies the language of the localized Steam data
onlinecountIf specified this will be the text for the online count. Use :count to dynamically insert the actual products player/user count.
ratingIf set to true then the app rating will be shown as a 5-star-system, otherwise it is hidden
playtextSpecifies the text of the button that eventually links to the Steam products store page
authorSpecify a text that is displayed as the author of the product. You can use :developer and :publisher to dynamically insert the products developer and publisher names
widthSpecify the width of the widget
heightSpecify the height of the widget
style-border / style.borderSpecify border rounding: Either none, small or max
style-shadow / style.shadowYou can specify false to prevent displaying box shadow or true to enable (default)
style-color-background / style.colorBackgroundSpecify a CSS value for the background color
style-color-title / style.colorTitleSpecify a CSS value for the title color
style-color-description / style.colorDescriptionSpecify a CSS value for the description color
style-color-author / style.colorAuthorSpecify a CSS value for the author color
style-color-onlinecount / style.colorOnlinecountSpecify a CSS value for the online count color
style-hideimage / style.hideimageSpecify whether the widget image shall be hidden or not
+

+ +

+ You can also dynamically create Steam App widgets via JavaScript:
+ + 

+			
+<div id="app-widget"></div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    let widget = new SteamApp('#app-widget', {
+        appid: '{{ env('APP_EXAMPLE_APP') }}',
+        //You can specify the same attributes as shown in the table above
+    });
+});
+</script>
+			
+
+

+ +

+
The following methods are available for a Steam App element / object:
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MethodDescription
updateWidget()Updates the widget data and displays them
changeLang(lang, playtext, author, onlinecount)Changes the language of the widget using the given information
setImageVisibility(visibility)Sets the widget image visibility
remove()Removes the widget from the document
+

+ +
+
+ +
+ + +

Steam Server

+ +

+ When referenced the required Steam Server module, the minimum code to render a widget is as follows:
+ 

+			
+<steam-server addr="{{ env('APP_EXAMPLE_SERVER') }}"></steam-server>
+			
+
+ +

+ This renders the following widget:
+ +

+ +

+
You can define these options:
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributeValue
addrSpecifies the address of the server using format ip:port
headerIf you want to render the widget with a header image you may specify the URL to an image here
botsSpecify the text for the bot info. Use :count to render the actual bot count
secure_yesSpecifies the text that is displayed if the server is a secure server
secure_noSpecifies the text that is displayed if the server is not a secure server
hosting_dedicatedSpecifies the text that is displayed if the server is a dedicated server
hosting_listenSpecifies the text that is displayed if the server is a listen server
playtextSpecifies the text of the button that issues a connection to the server
widthSpecify the width of the widget
heightSpecify the height of the widget
style-border / style.borderSpecify border rounding: Either none, small or max
style-shadow / style.shadowYou can specify false to prevent displaying box shadow or true to enable (default)
style-color-background / style.colorBackgroundSpecify a CSS value for the background color
style-color-text-bright / style.colorTextBrightSpecify a CSS value for the bright texts
style-color-text-dark / style.colorTextDarkSpecify a CSS value for the dark texts
+

+ +

+ You can also dynamically create Steam Server widgets via JavaScript:
+ + 

+			
+<div id="server-widget"></div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    let widget = new SteamServer('#server-widget', {
+        addr: '{{ env('APP_EXAMPLE_SERVER') }}',
+        //You can specify the same attributes as shown in the table above
+    });
+});
+</script>
+			
+
+

+ +

+
The following methods are available for a Steam Server element / object:
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MethodDescription
updateWidget()Updates the widget data and displays them
changeLang(bots, secure_yes, secure_no, hosting_dedicated, hosting_listen, playtext)Changes the language of the widget using the given information
setImageVisibility(visibility)Sets the widget image visibility
remove()Removes the widget from the document
+

+ +
+
+ +
+ + +

Steam User

+ +

+ When referenced the required Steam User module, the minimum code to render a widget is as follows:
+ 

+			
+<steam-user steamid="{{ env('APP_EXAMPLE_USER') }}"></steam-user>
+			
+
+ +

+ This renders the following widget:
+ +

+ +

+
You can define these options:
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributeValue
steamidSpecifies the SteamID of the Steam user
headerIf you want to render the widget with a header image you may specify the URL to an image here
online_yesSpecifies the text that is displayed if the user is currently online
online_noSpecifies the text that is displayed if the user is not currently online
member_sinceSpecifies the text and format of the info that shows since when the user account is registered. Use :year, :month and :day to format the date.
viewtextSpecifies the text of the button which can be used to go to the users Steam Community profile
widthSpecify the width of the widget
heightSpecify the height of the widget
style-border / style.borderSpecify border rounding: Either none, small or max
style-shadow / style.shadowYou can specify false to prevent displaying box shadow or true to enable (default)
style-color-background / style.colorBackgroundSpecify a CSS value for the background color
style-color-text-bright / style.colorTextBrightSpecify a CSS value for the bright texts
style-color-text-dark / style.colorTextDarkSpecify a CSS value for the dark texts
+

+ +

+ You can also dynamically create Steam User widgets via JavaScript:
+ + 

+			
+<div id="user-widget"></div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    let widget = new SteamUser('#user-widget', {
+        steamid: '{{ env('APP_EXAMPLE_USER') }}',
+        //You can specify the same attributes as shown in the table above
+    });
+});
+</script>
+			
+
+

+ +

+
The following methods are available for a Steam User element / object:
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MethodDescription
updateWidget()Updates the widget data and displays them
changeLang(online_yes, online_no, member_since, viewtext)Changes the language of the widget using the given information
setImageVisibility(visibility)Sets the widget image visibility
remove()Removes the widget from the document
+

+
+ +
+ + +

Steam Workshop

+ +

+ When referenced the required Steam Workshop module, the minimum code to render a widget is as follows:
+ 

+			
+<steam-workshop itemid="{{ env('APP_EXAMPLE_WORKSHOP') }}"></steam-workshop>
+			
+
+ +

+ This renders the following widget:
+ +

+ +

+
You can define these options:
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributeValue
itemidSpecifies the item ID of the Steam Workshop item
viewsSpecifies the text of the views stats label
subscriptionsSpecifies the text of the subscriptions stats label
favoritesSpecifies the text of the favorites stats label
authorSpecifies the author text. Use :creator to insert the creators Steam persona name
viewtextSpecifies the text of the button which can be used to go to the Workshop item page
show-image / showImageSpecifies if the workshop item preview image shall be displayed. Defaults to true/1
style-border / style.borderSpecify border rounding: Either none, small or max
style-shadow / style.shadowYou can specify false to prevent displaying box shadow or true to enable (default)
style-color-background / style.colorBackgroundSpecify a CSS value for the background color
style-color-title / style.colorTitleSpecify a CSS value for the title color
style-color-description / style.colorDescriptionSpecify a CSS value for the description color
style-color-stats-count / style.colorStatsCountSpecify a CSS value for the stats count color
style-color-stats-label / style.colorStatsLabelSpecify a CSS value for the stats label color
+

+ +

+ You can also dynamically create Steam Workshop widgets via JavaScript:
+ + 

+			
+<div id="workshop-widget"></div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    let widget = new SteamWorkshop('#workshop-widget', {
+        itemid: '{{ env('APP_EXAMPLE_WORKSHOP') }}',
+        //You can specify the same attributes as shown in the table above
+    });
+});
+</script>
+			
+
+

+ +

+
The following methods are available for a Steam Workshop element / object:
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MethodDescription
updateWidget()Updates the widget data and displays them
changeLang(views, subscriptions, favorites, author, viewtext)Changes the language of the widget using the given information
setImageVisibility(visibility)Sets the widget image visibility
remove()Removes the widget from the document
+

+
+ +
+ + +

Steam Group

+ +

+ When referenced the required Steam Group module, the minimum code to render a widget is as follows:
+ 

+			
+<steam-group group="{{ env('APP_EXAMPLE_GROUP') }}"></steam-group>
+			
+
+ +

+ This renders the following widget:
+ +

+ +

+
You can define these options:
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributeValue
groupSpecifies the group either by numeric ID or URL identifier token
membersSpecifies the text of the members stats label
onlineSpecifies the text of the online stats label
ingameSpecifies the text of the in-game stats label
viewtextSpecifies the text of the button which can be used to go to the group page
show-image / showImageSpecifies if the group avatar image shall be displayed. Defaults to true/1
style-border / style.borderSpecify border rounding: Either none, small or max
style-shadow / style.shadowYou can specify false to prevent displaying box shadow or true to enable (default)
style-color-background / style.colorBackgroundSpecify a CSS value for the background color
style-color-title / style.colorTitleSpecify a CSS value for the title color
style-color-description / style.colorDescriptionSpecify a CSS value for the description color
style-color-stats-count / style.colorStatsCountSpecify a CSS value for the stats count color
style-color-stats-label / style.colorStatsLabelSpecify a CSS value for the stats label color
+

+ +

+ You can also dynamically create Steam Group widgets via JavaScript:
+ + 

+			
+<div id="group-widget"></div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    let widget = new SteamGroup('#group-widget', {
+        group: '{{ env('APP_EXAMPLE_GROUP') }}',
+        //You can specify the same attributes as shown in the table above
+    });
+});
+</script>
+			
+
+

+ +

+
The following methods are available for a Steam Group element / object:
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MethodDescription
updateWidget()Updates the widget data and displays them
changeLang(online, ingame, members, viewtext)Changes the language of the widget using the given information
setImageVisibility(visibility)Sets the widget image visibility
remove()Removes the widget from the document
+

+
\ No newline at end of file diff --git a/app/views/header.php b/app/views/header.php index dd10966..1590ec5 100644 --- a/app/views/header.php +++ b/app/views/header.php @@ -1,19 +1,34 @@ -
+@if ((isset($show_header)) && ($show_header == true)) +
-
- -
-
-

{{ env('APP_NAME') }}

+
+
+

{{ env('APP_NAME') }}

{{ env('APP_DESCRIPTION') }}

+ +
+ {{ env('APP_NAME') }} is a clientside web component that offers an easy way to integrate Steam Widgets of various Steam entities into your website. Therefore you only need very few code in order to render Steam Widgets into your document. + {{ env('APP_NAME') }} is used via JavaScript. Since JavaScript is supported by all major browser per default it is platform independent and compatible. + {{ env('APP_NAME') }} widgets are responsive, localizable, customizable and easily adjustable. +
+ +
+ Read More + Documentation +
-
+
+
+ +
+
-
\ No newline at end of file +
+@endif \ No newline at end of file diff --git a/app/views/index.php b/app/views/index.php index 8974a70..3896cfc 100644 --- a/app/views/index.php +++ b/app/views/index.php @@ -1,874 +1,33 @@
-

- -

About

- -

- {{ env('APP_NAME') }} is a clientside web component that offers an easy way to integrate Steam Widgets of various Steam - entities into your website. Therefore you only need very few code in order to render Steam Widgets into your document. -

- -

- {{ env('APP_NAME') }} is used via JavaScript. Since JavaScript is supported by all major browser per default it is - platform independent and compatible. -

- -

- The following Widgets are currently available:
- -

-

- -

- You can use {{ env('APP_NAME') }} by referencing the neccessary JavaScript files from the official {{ env('APP_NAME') }} server as follows:
- - 

-			
-<script src="{{ Utils::url('/api/resource/query?type=js&module=STEAM_WIDGETS_MODULE&version=v1') }}"></script>
-			
-
- -
- - STEAM_WIDGETS_MODULE can either be app for the Steam App widget, server for the Steam Server widget, - user for the Steam User widget, workshop for the Steam Workshop widget or group for the Steam Group widget. -

- - @if (env('APP_SHOWNPMUSAGE', false)) -

- You can also use NPM to install the package. Please visit the NPM page of the package in order to get instruction details:
-
- -

- NPM package: {{ env('APP_NPMPACKAGEURL') }} -
-

- @endif - -
+

-
-

- -

Steam App

- -

- When referenced the required Steam App module, the minimum code to render a widget is as follows:
- 

-			
-<steam-app appid="{{ env('APP_EXAMPLE_APP') }}"></steam-app>
-			
-
- -

- This renders the following widget:
- -

- -

-
You can define these options:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
AttributeValue
appidSpecifies the ID of a Steam game/app
langSpecifies the language of the localized Steam data
onlinecountIf specified this will be the text for the online count. Use :count to dynamically insert the actual products player/user count.
ratingIf set to true then the app rating will be shown as a 5-star-system, otherwise it is hidden
playtextSpecifies the text of the button that eventually links to the Steam products store page
authorSpecify a text that is displayed as the author of the product. You can use :developer and :publisher to dynamically insert the products developer and publisher names
widthSpecify the width of the widget
heightSpecify the height of the widget
style-border / style.borderSpecify border rounding: Either none, small or max
style-shadow / style.shadowYou can specify false to prevent displaying box shadow or true to enable (default)
style-color-background / style.colorBackgroundSpecify a CSS value for the background color
style-color-title / style.colorTitleSpecify a CSS value for the title color
style-color-description / style.colorDescriptionSpecify a CSS value for the description color
style-color-author / style.colorAuthorSpecify a CSS value for the author color
style-color-onlinecount / style.colorOnlinecountSpecify a CSS value for the online count color
style-hideimage / style.hideimageSpecify whether the widget image shall be hidden or not
-

- -

- You can also dynamically create Steam App widgets via JavaScript:
- - 

-			
-<div id="app-widget"></div>
-
-<script>
-document.addEventListener('DOMContentLoaded', function() {
-    let widget = new SteamApp('#app-widget', {
-        appid: '{{ env('APP_EXAMPLE_APP') }}',
-        //You can specify the same attributes as shown in the table above
-    });
-});
-</script>
-			
-
-

- -

-
The following methods are available for a Steam App element / object:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MethodDescription
updateWidget()Updates the widget data and displays them
changeLang(lang, playtext, author, onlinecount)Changes the language of the widget using the given information
setImageVisibility(visibility)Sets the widget image visibility
remove()Removes the widget from the document
-

- -
-
- -
-

- -

Steam Server

- -

- When referenced the required Steam Server module, the minimum code to render a widget is as follows:
- 

-			
-<steam-server addr="{{ env('APP_EXAMPLE_SERVER') }}"></steam-server>
-			
-
- -

- This renders the following widget:
- -

- -

-
You can define these options:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
AttributeValue
addrSpecifies the address of the server using format ip:port
headerIf you want to render the widget with a header image you may specify the URL to an image here
botsSpecify the text for the bot info. Use :count to render the actual bot count
secure_yesSpecifies the text that is displayed if the server is a secure server
secure_noSpecifies the text that is displayed if the server is not a secure server
hosting_dedicatedSpecifies the text that is displayed if the server is a dedicated server
hosting_listenSpecifies the text that is displayed if the server is a listen server
playtextSpecifies the text of the button that issues a connection to the server
widthSpecify the width of the widget
heightSpecify the height of the widget
style-border / style.borderSpecify border rounding: Either none, small or max
style-shadow / style.shadowYou can specify false to prevent displaying box shadow or true to enable (default)
style-color-background / style.colorBackgroundSpecify a CSS value for the background color
style-color-text-bright / style.colorTextBrightSpecify a CSS value for the bright texts
style-color-text-dark / style.colorTextDarkSpecify a CSS value for the dark texts
-

- -

- You can also dynamically create Steam Server widgets via JavaScript:
- - 

-			
-<div id="server-widget"></div>
-
-<script>
-document.addEventListener('DOMContentLoaded', function() {
-    let widget = new SteamServer('#server-widget', {
-        addr: '{{ env('APP_EXAMPLE_SERVER') }}',
-        //You can specify the same attributes as shown in the table above
-    });
-});
-</script>
-			
-
-

- -

-
The following methods are available for a Steam Server element / object:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MethodDescription
updateWidget()Updates the widget data and displays them
changeLang(bots, secure_yes, secure_no, hosting_dedicated, hosting_listen, playtext)Changes the language of the widget using the given information
setImageVisibility(visibility)Sets the widget image visibility
remove()Removes the widget from the document
-

- -
-
- -
-

- -

Steam User

- -

- When referenced the required Steam User module, the minimum code to render a widget is as follows:
- 

-			
-<steam-user steamid="{{ env('APP_EXAMPLE_USER') }}"></steam-user>
-			
-
- -

- This renders the following widget:
- -

- -

-
You can define these options:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
AttributeValue
steamidSpecifies the SteamID of the Steam user
headerIf you want to render the widget with a header image you may specify the URL to an image here
online_yesSpecifies the text that is displayed if the user is currently online
online_noSpecifies the text that is displayed if the user is not currently online
member_sinceSpecifies the text and format of the info that shows since when the user account is registered. Use :year, :month and :day to format the date.
viewtextSpecifies the text of the button which can be used to go to the users Steam Community profile
widthSpecify the width of the widget
heightSpecify the height of the widget
style-border / style.borderSpecify border rounding: Either none, small or max
style-shadow / style.shadowYou can specify false to prevent displaying box shadow or true to enable (default)
style-color-background / style.colorBackgroundSpecify a CSS value for the background color
style-color-text-bright / style.colorTextBrightSpecify a CSS value for the bright texts
style-color-text-dark / style.colorTextDarkSpecify a CSS value for the dark texts
-

- -

- You can also dynamically create Steam User widgets via JavaScript:
- - 

-			
-<div id="user-widget"></div>
-
-<script>
-document.addEventListener('DOMContentLoaded', function() {
-    let widget = new SteamUser('#user-widget', {
-        steamid: '{{ env('APP_EXAMPLE_USER') }}',
-        //You can specify the same attributes as shown in the table above
-    });
-});
-</script>
-			
-
-

- -

-
The following methods are available for a Steam User element / object:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MethodDescription
updateWidget()Updates the widget data and displays them
changeLang(online_yes, online_no, member_since, viewtext)Changes the language of the widget using the given information
setImageVisibility(visibility)Sets the widget image visibility
remove()Removes the widget from the document
-

-
- -
-

- -

Steam Workshop

- -

- When referenced the required Steam Workshop module, the minimum code to render a widget is as follows:
- 

-			
-<steam-workshop itemid="{{ env('APP_EXAMPLE_WORKSHOP') }}"></steam-workshop>
-			
-
- -

- This renders the following widget:
- -

- -

-
You can define these options:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
AttributeValue
itemidSpecifies the item ID of the Steam Workshop item
viewsSpecifies the text of the views stats label
subscriptionsSpecifies the text of the subscriptions stats label
favoritesSpecifies the text of the favorites stats label
authorSpecifies the author text. Use :creator to insert the creators Steam persona name
viewtextSpecifies the text of the button which can be used to go to the Workshop item page
show-image / showImageSpecifies if the workshop item preview image shall be displayed. Defaults to true/1
style-border / style.borderSpecify border rounding: Either none, small or max
style-shadow / style.shadowYou can specify false to prevent displaying box shadow or true to enable (default)
style-color-background / style.colorBackgroundSpecify a CSS value for the background color
style-color-title / style.colorTitleSpecify a CSS value for the title color
style-color-description / style.colorDescriptionSpecify a CSS value for the description color
style-color-stats-count / style.colorStatsCountSpecify a CSS value for the stats count color
style-color-stats-label / style.colorStatsLabelSpecify a CSS value for the stats label color
-

- -

- You can also dynamically create Steam Workshop widgets via JavaScript:
- - 

-			
-<div id="workshop-widget"></div>
-
-<script>
-document.addEventListener('DOMContentLoaded', function() {
-    let widget = new SteamWorkshop('#workshop-widget', {
-        itemid: '{{ env('APP_EXAMPLE_WORKSHOP') }}',
-        //You can specify the same attributes as shown in the table above
-    });
-});
-</script>
-			
-
-

- -

-
The following methods are available for a Steam Workshop element / object:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MethodDescription
updateWidget()Updates the widget data and displays them
changeLang(views, subscriptions, favorites, author, viewtext)Changes the language of the widget using the given information
setImageVisibility(visibility)Sets the widget image visibility
remove()Removes the widget from the document
-

-
- -
-

- -

Steam Group

- -

- When referenced the required Steam Group module, the minimum code to render a widget is as follows:
- 

-			
-<steam-group group="{{ env('APP_EXAMPLE_GROUP') }}"></steam-group>
-			
-
- -

- This renders the following widget:
- -

- -

-
You can define these options:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
AttributeValue
groupSpecifies the group either by numeric ID or URL identifier token
membersSpecifies the text of the members stats label
onlineSpecifies the text of the online stats label
ingameSpecifies the text of the in-game stats label
viewtextSpecifies the text of the button which can be used to go to the group page
show-image / showImageSpecifies if the group avatar image shall be displayed. Defaults to true/1
style-border / style.borderSpecify border rounding: Either none, small or max
style-shadow / style.shadowYou can specify false to prevent displaying box shadow or true to enable (default)
style-color-background / style.colorBackgroundSpecify a CSS value for the background color
style-color-title / style.colorTitleSpecify a CSS value for the title color
style-color-description / style.colorDescriptionSpecify a CSS value for the description color
style-color-stats-count / style.colorStatsCountSpecify a CSS value for the stats count color
style-color-stats-label / style.colorStatsLabelSpecify a CSS value for the stats label color
-

- -

- You can also dynamically create Steam Group widgets via JavaScript:
- - 

-			
-<div id="group-widget"></div>
-
-<script>
-document.addEventListener('DOMContentLoaded', function() {
-    let widget = new SteamGroup('#group-widget', {
-        group: '{{ env('APP_EXAMPLE_GROUP') }}',
-        //You can specify the same attributes as shown in the table above
-    });
-});
-</script>
-			
-
-

- -

-
The following methods are available for a Steam Group element / object:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MethodDescription
updateWidget()Updates the widget data and displays them
changeLang(online, ingame, members, viewtext)Changes the language of the widget using the given information
setImageVisibility(visibility)Sets the widget image visibility
remove()Removes the widget from the document
-

+
+
+ 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. + 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. + 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. + Lorem Ipsum Dolor Sit Amet. +
\ No newline at end of file diff --git a/app/views/navbar.php b/app/views/navbar.php index 8d706ea..2f3a60c 100644 --- a/app/views/navbar.php +++ b/app/views/navbar.php @@ -1,4 +1,4 @@ -