corrade-nucleus-nucleons
| /base/000_base/css/nucleus/nucleus.css |
|---|
| @@ -83,7 +83,7 @@ |
|---|
| } |
| |
| /* Responsive: Portrait tablets and up */ |
| @media screen and (min-width: 768px) { |
| @media screen and (min-width: 480px) { |
| /* Remove the padding we set earlier */ |
| .header, |
| .marketing, |
| @@ -105,4 +105,8 @@ |
|---|
| background-color: #ddddff !important; |
| } |
| |
| .fake-btn { |
| background-color: rgba(0, 0, 0, 0) !important; |
| } |
| |
| |
| /base/000_base/img/loader.svg |
|---|
| @@ -0,0 +1,22 @@ |
|---|
| <svg width="200px" height="200px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-cube" style="background-image: none; background-position: initial initial; background-repeat: initial initial;"> |
| <g transform="translate(25,25)"> |
| <rect ng-attr-x="{{config.dp}}" ng-attr-y="{{config.dp}}" ng-attr-width="{{config.blockSize}}" ng-attr-height="{{config.blockSize}}" ng-attr-fill="{{config.c1}}" x="-20" y="-20" width="40" height="40" fill="#3be8b0"> |
| <animateTransform attributeName="transform" type="scale" calcMode="spline" values="1.5;1" keyTimes="0;1" dur="1s" keySplines="0 0.5 0.5 1" begin="-0.3s" repeatCount="indefinite"></animateTransform> |
| </rect> |
| </g> |
| <g transform="translate(75,25)"> |
| <rect ng-attr-x="{{config.dp}}" ng-attr-y="{{config.dp}}" ng-attr-width="{{config.blockSize}}" ng-attr-height="{{config.blockSize}}" ng-attr-fill="{{config.c2}}" x="-20" y="-20" width="40" height="40" fill="#1aafd0"> |
| <animateTransform attributeName="transform" type="scale" calcMode="spline" values="1.5;1" keyTimes="0;1" dur="1s" keySplines="0 0.5 0.5 1" begin="-0.2s" repeatCount="indefinite"></animateTransform> |
| </rect> |
| </g> |
| <g transform="translate(25,75)"> |
| <rect ng-attr-x="{{config.dp}}" ng-attr-y="{{config.dp}}" ng-attr-width="{{config.blockSize}}" ng-attr-height="{{config.blockSize}}" ng-attr-fill="{{config.c3}}" x="-20" y="-20" width="40" height="40" fill="#6a67ce"> |
| <animateTransform attributeName="transform" type="scale" calcMode="spline" values="1.5;1" keyTimes="0;1" dur="1s" keySplines="0 0.5 0.5 1" begin="0s" repeatCount="indefinite"></animateTransform> |
| </rect> |
| </g> |
| <g transform="translate(75,75)"> |
| <rect ng-attr-x="{{config.dp}}" ng-attr-y="{{config.dp}}" ng-attr-width="{{config.blockSize}}" ng-attr-height="{{config.blockSize}}" ng-attr-fill="{{config.c4}}" x="-20" y="-20" width="40" height="40" fill="#ffb900"> |
| <animateTransform attributeName="transform" type="scale" calcMode="spline" values="1.5;1" keyTimes="0;1" dur="1s" keySplines="0 0.5 0.5 1" begin="-0.1s" repeatCount="indefinite"></animateTransform> |
| </rect> |
| </g> |
| </svg> |
| /base/000_base/index.html |
|---|
| @@ -40,6 +40,10 @@ |
|---|
| <div id="heartbeat" class="row"></div> |
| </div> |
| </div> |
| |
| <div id="nucleons-container"> |
| |
| </div> |
| |
| <div class="panel panel-default draggable movable"> |
| <div class="panel-heading"> |
| /base/000_base/js/nucleus/load-nucleons.js |
|---|
| @@ -1,3 +1,26 @@ |
|---|
| function loadNucleon(nucleon) { |
| // If the nucleon already exists, then do not append the content again. |
| if($('#' + nucleon).length) |
| return; |
| |
| // Disable button for successive clicks. |
| $('#' + nucleon + '-button').prop('disabled', true); |
| |
| // Change the nucleon icon to a loading icon. |
| $('#' + nucleon + '-icon').attr('src', '/img/loader.svg'); |
| |
| // Load the nucleon. |
| $.get('/' + nucleon + '/index.html', function(data) { |
| $('#nucleons-container').append(data); |
| }).done(function(data) { |
| // Change the nucleon icon back. |
| $('#' + nucleon + '-icon').attr('src', '/' + nucleon + '/img/' + nucleon + '.png'); |
| // Enable the button. |
| $('#' + nucleon + '-button').prop('disabled', false); |
| }); |
| } |
| |
| // Generate the nucleon selectors. |
| $(document).ready(function() { |
| // Search and load all nucleons. |
| $.get('/nucleons', function(data) { |
