Tabs, groups and help with CSS structure

Dashboard
121

So this (that) code will go in the template node.... I'm guessing.

Hang on.

Applying.

Quick side question:
In the code:
Why are all but the first line indented?
Shouldn't they all be at the same level of indenting?

Ok, I'm missing something.

This is what I think it should be:

<div id="regular_1">
   <md-button class="md-button remote-button.num">1  //  **THIS LINE  ***
   </md-button>
</div>

<script>

(function($scope) {

$('#regular_1').on('click', function(e) {
    e.preventDefault(); //prevent default behavior
    $scope.send({"topic":"momentary_regular","payload": 1});
});
    
})(scope);
</script>

If it is right: bad news.

I'll post now and wait your reply.

122

Edited my post but too late. sorry. See there is space between class names. not dot.

123

No problems. :wink: All part of the fun of learning.

Ok, did it only to 1. I can just make out it is bold..... No worries. All good.

I'll do the rest of the number buttons.

Back shortly.

124

Ok! :smiley: I'm sort of starting to get this.

Not to be picky, I guess it would be better to call this (rather than .remote-button.num{) it would be better to call it .remote-button.bold{?

No big deal. But it is just that we are styling it as bold. Not so much number.

Anyway. Starting to really look good.

Next! :smile:

125

We can add other porperties to that remote-button.num class.
Like make them tiny bit bigger also

.remote-button.num{
        font-weight:bold;
        font-size:1.1em;
    }

What is the good thing, you can just adjust one parameter and all your buttons with this class will be changed

126

Ok... I get it. But may I change it from num to bold? Just to me that is more applicable.

I'll edit the template node now.

I'm not really seeing a size change adding that line.

127

You made me do the same cos we need to have same result to work with

128

I don't mean I have to do it now.... Just when all is done.

But with the num thing..... Applied, but no visible size change.
maybe because all the buttons (number) are getting bigger and so I can't see a change.

129

Let-s check then.

Show me button num 5

<div id="regular_1">
   <md-button class="md-button remote-button bold">5
   </md-button>
</div>

<script>

(function($scope) {

$('#regular_1').on('click', function(e) {
    e.preventDefault(); //prevent default behavior
    $scope.send({"topic":"momentary_regular","payload": 5});
});
    
})(scope);
</script>

And template content

<style id="remote-buttons">
    :root {
      --dashboard-unit-width: 48px;
      --dashboard-unit-height: 48px;
    }
    .nr-dashboard-template {
        padding: 0px;
    }
    .remote-button:not([disabled]):hover{
         background-color: #232323 !important;
    }
    .remote-button{
        background-color: black !important;
        color: #cccccc !important;
        height: var(--dashboard-unit-height);
        width: 100%;
        border-radius: 10px;
        font-size:1.0em;
        font-weight:normal;
        margin: 0;
        min-height: 36px;
        min-width: unset;
        line-height: unset;
    }
    .remote-button.bold{
        font-weight:bold;
    }
    .remote-button.red{
        background-color: red !important;
        color: #cccccc !important;
    }
    .remote-button.red:not([disabled]):hover{
         background-color: orange !important;
    }
    .remote-icon{
        font-size:1.0em;
    }
</style>
130

Sorry. I jumped a bit ahead. I edited the template node and made it:
font-size:1.5em;

Yes, the numbers got bigger. Still in the button size. So I may leave it at that.

Screenshot from 2020-04-24 22-47-08

131

Do what ever you find good for your numeric buttons, but adjust only the class meant for them.
If you are ready, you-ll need to share what you did, cos I have to implement same things

132

This is the buttons (and template) nodes:

[{"id":"246a2951.92dc26","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"NetFlix","order":20,"width":"1","height":"1","format":"<div id=\"regular_1\">\n   <md-button class=\"md-button remote-button\">NetFlx\n   </md-button>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":260,"y":1670,"wires":[["afbd4673.5e049"]]},{"id":"718d5dc3.56cb84","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"Home","order":21,"width":"1","height":"1","format":"<div id=\"regular_1\">\n   <md-button class=\"md-button remote-button\">Home\n   </md-button>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":490,"y":1670,"wires":[["c9b4cef1.46fa28"]]},{"id":"970717bb.7c1bc","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"Vid","order":22,"width":"1","height":"1","format":"<div id=\"regular_1\">\n   <md-button class=\"md-button remote-button\">Video\n   </md-button>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":730,"y":1670,"wires":[["11932257.837916"]]},{"id":"54c0bac.5f5fac4","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"WWW","order":23,"width":"1","height":"1","format":"<div id=\"regular_1\">\n   <md-button class=\"md-button remote-button\">WWW\n   </md-button>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":250,"y":1720,"wires":[["60092350.bb50d4"]]},{"id":"89495b4f.be569","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"^","order":24,"width":"1","height":"1","format":"<div id=\"regular_plus\">\n   <md-button class=\"md-button remote-button\">\n      <i class=\"fa fa-fw fa-chevron-up remote-icon\"></i>\n   </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n    \n$('#regular_plus').on('click', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"regular_plus\",\"payload\": \"up\"});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":490,"y":1720,"wires":[["4f16229f.83e86c"]]},{"id":"9e8e8f5d.65f848","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"Guide","order":25,"width":"1","height":"1","format":"<div id=\"regular_1\">\n   <md-button class=\"md-button remote-button\">Guide\n   </md-button>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":730,"y":1720,"wires":[["95ce3b1e.0f93b8"]]},{"id":"2cf79a2f.996f2e","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"<","order":26,"width":"1","height":"1","format":"<div id=\"regular_plus\">\n   <md-button class=\"md-button remote-button\">\n      <i class=\"fa fa-fw fa-chevron-left remote-icon\"></i>\n   </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n    \n$('#regular_plus').on('click', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"regular_plus\",\"payload\": \"left\"});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":250,"y":1770,"wires":[["d7b7d5f2.3a5e48"]]},{"id":"7f0678e0.82d7","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"Sel","order":27,"width":"1","height":"1","format":"<div id=\"regular_1\">\n   <md-button class=\"md-button remote-button\">Sel\n   </md-button>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":490,"y":1770,"wires":[["e14e9d65.fb77e"]]},{"id":"3a190f7d.487938","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":">","order":28,"width":"1","height":"1","format":"<div id=\"regular_plus\">\n   <md-button class=\"md-button remote-button\">\n      <i class=\"fa fa-fw fa-chevron-right remote-icon\"></i>\n   </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n    \n$('#regular_plus').on('click', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"regular_plus\",\"payload\": \"right\"});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":730,"y":1770,"wires":[["1118a5c4.a7ae2a"]]},{"id":"c99f1ee5.f417b","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"Rtn","order":29,"width":"1","height":"1","format":"<div id=\"regular_plus\">\n   <md-button class=\"md-button remote-button\">\n      <i class=\"fa fa-fw fa-rotate-left remote-icon\"></i>\n   </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n    \n$('#regular_plus').on('click', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"regular_plus\",\"payload\": \"rtn\"});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":250,"y":1820,"wires":[["e4e3b572.b2fb08"]]},{"id":"d332ca70.a1d1c8","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"V","order":30,"width":"1","height":"1","format":"<div id=\"regular_plus\">\n   <md-button class=\"md-button remote-button\">\n      <i class=\"fa fa-fw fa-chevron-down remote-icon\"></i>\n   </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n    \n$('#regular_plus').on('click', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"regular_plus\",\"payload\": \"down\"});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":490,"y":1820,"wires":[["62e24409.42ea94"]]},{"id":"7bf90b0f.0b4e74","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"Exit","order":31,"width":"1","height":"1","format":"<div id=\"regular_plus\">\n   <md-button class=\"md-button remote-button\">\n      <i class=\"fa fa-fw fa-exit remote-icon\"></i>\n   </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n    \n$('#regular_plus').on('click', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"regular_plus\",\"payload\": \"exit\"});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":730,"y":1820,"wires":[["b43ccc1f.bf4aa"]]},{"id":"8f960c13.389b9","type":"link in","z":"1781e581.31721a","name":"","links":["b2f939.032cc6c8"],"x":165,"y":1570,"wires":[["45e5a406.7764d4"]]},{"id":"69848a07.c10464","type":"link out","z":"1781e581.31721a","name":"","links":["5f10d2a2.d7607c"],"x":364,"y":1570,"wires":[]},{"id":"38632cf8.1416c4","type":"link in","z":"1781e581.31721a","name":"","links":["2b8f290.2f6af58"],"x":165,"y":1620,"wires":[["701d26ed.1b858"]]},{"id":"8b474223.183d08","type":"link out","z":"1781e581.31721a","name":"","links":["46de1438.358a4c"],"x":364,"y":1620,"wires":[]},{"id":"530c8cf7.a70744","type":"link in","z":"1781e581.31721a","name":"","links":["1fd3690f.639d27"],"x":295,"y":1320,"wires":[[]]},{"id":"1fd3690f.639d27","type":"link out","z":"1781e581.31721a","name":"","links":["530c8cf7.a70744"],"x":220,"y":1320,"wires":[]},{"id":"e4e3b572.b2fb08","type":"link out","z":"1781e581.31721a","name":"","links":["f04eb47e.d2faf8"],"x":359,"y":1820,"wires":[]},{"id":"62e24409.42ea94","type":"link out","z":"1781e581.31721a","name":"","links":["b82f0da4.35205"],"x":585,"y":1820,"wires":[]},{"id":"b43ccc1f.bf4aa","type":"link out","z":"1781e581.31721a","name":"","links":["ca1fbb11.f219"],"x":825,"y":1820,"wires":[]},{"id":"d7b7d5f2.3a5e48","type":"link out","z":"1781e581.31721a","name":"","links":["45f4a2aa.8efdcc"],"x":359,"y":1770,"wires":[]},{"id":"e14e9d65.fb77e","type":"link out","z":"1781e581.31721a","name":"","links":["de1c545e.70ada8"],"x":585,"y":1770,"wires":[]},{"id":"1118a5c4.a7ae2a","type":"link out","z":"1781e581.31721a","name":"","links":["5cfe822d.9e1814"],"x":825,"y":1770,"wires":[]},{"id":"60092350.bb50d4","type":"link out","z":"1781e581.31721a","name":"","links":["2f133be1.7092bc"],"x":360,"y":1720,"wires":[]},{"id":"afbd4673.5e049","type":"link out","z":"1781e581.31721a","name":"","links":["177e6a72.ada5ae"],"x":365,"y":1670,"wires":[]},{"id":"c9b4cef1.46fa28","type":"link out","z":"1781e581.31721a","name":"","links":["8209bb9e.3e47a"],"x":585,"y":1670,"wires":[]},{"id":"4f16229f.83e86c","type":"link out","z":"1781e581.31721a","name":"","links":["161ffc66.196564"],"x":585,"y":1720,"wires":[]},{"id":"11932257.837916","type":"link out","z":"1781e581.31721a","name":"","links":["7a3f6d20.ee6adc"],"x":825,"y":1670,"wires":[]},{"id":"95ce3b1e.0f93b8","type":"link out","z":"1781e581.31721a","name":"","links":["9e84443f.413328"],"x":825,"y":1720,"wires":[]},{"id":"ea7d6c1f.e4e118","type":"link out","z":"1781e581.31721a","name":"","links":["1ec1e50a.666ddb"],"x":585,"y":1620,"wires":[]},{"id":"9451d6b2.cb6948","type":"link out","z":"1781e581.31721a","name":"","links":["b934ec01.a8adf8"],"x":825,"y":1620,"wires":[]},{"id":"db5e3233.c9fad","type":"link out","z":"1781e581.31721a","name":"","links":["21eebe73.5057da"],"x":825,"y":1570,"wires":[]},{"id":"9d7f3cad.d7b8f","type":"link out","z":"1781e581.31721a","name":"","links":["1ab9b028.28f328"],"x":585,"y":1570,"wires":[]},{"id":"da55f79c.415fe8","type":"link out","z":"1781e581.31721a","name":"","links":["fb43d543.5faef"],"x":585,"y":1520,"wires":[]},{"id":"988671af.8646b","type":"link out","z":"1781e581.31721a","name":"","links":["a9d0f3df.54ccd"],"x":825,"y":1520,"wires":[]},{"id":"6d970c11.6d158c","type":"link out","z":"1781e581.31721a","name":"","links":["260e6c63.8bb99c"],"x":364,"y":1520,"wires":[]},{"id":"1cf586b3.c22e71","type":"link out","z":"1781e581.31721a","name":"","links":["b1c885a8.159018"],"x":365,"y":1370,"wires":[]},{"id":"a97c8331.4a4d88","type":"link out","z":"1781e581.31721a","name":"","links":["12a841e3.f25696"],"x":365,"y":1420,"wires":[]},{"id":"6580d2cf.bea1a4","type":"link out","z":"1781e581.31721a","name":"","links":["1b9c3393.0843dc"],"x":365,"y":1470,"wires":[]},{"id":"65209bf1.63524c","type":"link out","z":"1781e581.31721a","name":"","links":["8173943f.2c6a"],"x":585,"y":1370,"wires":[]},{"id":"57e01527.528f84","type":"link out","z":"1781e581.31721a","name":"","links":["9baf35a8.7bdd78"],"x":585,"y":1420,"wires":[]},{"id":"caf00dda.129a28","type":"link out","z":"1781e581.31721a","name":"","links":["4b242414.764014"],"x":585,"y":1470,"wires":[]},{"id":"80b64ca.c7a903","type":"link out","z":"1781e581.31721a","name":"","links":["c6055e4.7791fa"],"x":825,"y":1370,"wires":[]},{"id":"4debbbe1.4993ec","type":"link out","z":"1781e581.31721a","name":"","links":["e9ca8a9c.7a84b8"],"x":825,"y":1420,"wires":[]},{"id":"ee449d92.abff6","type":"link out","z":"1781e581.31721a","name":"","links":["d7c8f004.b43d08"],"x":825,"y":1470,"wires":[]},{"id":"bded269f.23a12","type":"ui_template","z":"1781e581.31721a","group":"6ab22327.a2f71c","name":"THIS IS THE TEMPLATE","order":7,"width":0,"height":0,"format":"<style id=\"remote-buttons\">\n    :root {\n      --dashboard-unit-width: 48px;\n      --dashboard-unit-height: 48px;\n    }\n    .nr-dashboard-template {\n        padding: 0px;\n    }\n    .remote-button:not([disabled]):hover{\n         background-color: #232323 !important;\n    }\n\n    .remote-button{\n        background-color: black !important;\n        color: #cccccc !important;\n        height: var(--dashboard-unit-height);\n        width: 100%;\n        border-radius: 10px;\n        font-size:1.0em;\n        font-weight:normal;\n        margin: 0;\n        min-height: 36px;\n        min-width: unset;\n        line-height: unset;\n    }\n    .remote-button.num{\n        font-weight:bold;\n        font-size:1.5em;\n    }\n\n    .remote-button.red{\n        background-color: red !important;\n        color: #cccccc !important;\n    }\n    .remote-button.red:not([disabled]):hover{\n         background-color: orange !important;\n    }\n    .remote-icon{\n        font-size:1.0em;\n    }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":500,"y":1320,"wires":[[]]},{"id":"797fdca7.e44f6c","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"1","order":1,"width":1,"height":1,"format":"<div id=\"regular_1\">\n   <md-button class=\"md-button remote-button num\">1\n   </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n\n$('#regular_1').on('click', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"momentary_regular\",\"payload\": 1});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":250,"y":1370,"wires":[["1cf586b3.c22e71"]]},{"id":"d7f1cca6.efb6","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"2","order":2,"width":1,"height":1,"format":"<div id=\"regular_1\">\n   <md-button class=\"md-button remote-button num\">2\n   </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n\n$('#regular_1').on('click', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"momentary_regular\",\"payload\": 2});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":490,"y":1370,"wires":[["65209bf1.63524c"]]},{"id":"3836583a.9f93a","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"3","order":3,"width":1,"height":1,"format":"<div id=\"regular_1\">\n   <md-button class=\"md-button remote-button num\">3\n   </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n\n$('#regular_1').on('click', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"momentary_regular\",\"payload\": 3});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":730,"y":1370,"wires":[["80b64ca.c7a903"]]},{"id":"7b369b2e.9adc94","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"4","order":4,"width":1,"height":1,"format":"<div id=\"regular_1\">\n   <md-button class=\"md-button remote-button num\">4\n   </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n\n$('#regular_1').on('click', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"momentary_regular\",\"payload\": 4});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":250,"y":1420,"wires":[["a97c8331.4a4d88"]]},{"id":"24ea6545.5497ba","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"5","order":5,"width":1,"height":1,"format":"<div id=\"regular_1\">\n   <md-button class=\"md-button remote-button num\">5\n   </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n\n$('#regular_1').on('click', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"momentary_regular\",\"payload\": 5});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":490,"y":1420,"wires":[["57e01527.528f84"]]},{"id":"51281a60.6c5004","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"6","order":6,"width":1,"height":1,"format":"<div id=\"regular_1\">\n   <md-button class=\"md-button remote-button num\">6\n   </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n\n$('#regular_1').on('click', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"momentary_regular\",\"payload\": 6});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":730,"y":1420,"wires":[["4debbbe1.4993ec"]]},{"id":"8c87e69f.13a17","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"7","order":7,"width":1,"height":1,"format":"<div id=\"regular_1\">\n   <md-button class=\"md-button remote-button num\">7\n   </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n\n$('#regular_1').on('click', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"momentary_regular\",\"payload\": 7});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":250,"y":1470,"wires":[["6580d2cf.bea1a4"]]},{"id":"2a484c89.499ad4","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"8","order":8,"width":1,"height":1,"format":"<div id=\"regular_1\">\n   <md-button class=\"md-button remote-button num\">8\n   </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n\n$('#regular_1').on('click', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"momentary_regular\",\"payload\": 8});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":490,"y":1470,"wires":[["caf00dda.129a28"]]},{"id":"edcc67c0.23134","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"9","order":9,"width":1,"height":1,"format":"<div id=\"regular_1\">\n   <md-button class=\"md-button remote-button num\">9\n   </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n\n$('#regular_1').on('click', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"momentary_regular\",\"payload\": 9});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":730,"y":1470,"wires":[["ee449d92.abff6"]]},{"id":"7ecd7ec4.83fed","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"0","order":11,"width":1,"height":1,"format":"<div id=\"regular_1\">\n   <md-button class=\"md-button remote-button num\">0\n   </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n\n$('#regular_1').on('click', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"momentary_regular\",\"payload\": 0});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":490,"y":1520,"wires":[["da55f79c.415fe8"]]},{"id":"b0f6668a.98a1f8","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"info","order":10,"width":1,"height":1,"format":"<div id=\"regular_plus\">\n   <md-button class=\"md-button remote-button\">\n      <i class=\"fa fa-2x fa-info-circle remote-icon\"></i>\n   </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n    \n$('#regular_plus').on('click', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"regular_plus\",\"payload\": \"info\"});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":250,"y":1520,"wires":[["6d970c11.6d158c"]]},{"id":"51f398a3.47de48","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"prev","order":12,"width":1,"height":1,"format":"<div id=\"regular_plus\">\n   <md-button class=\"md-button remote-button\">\n      <i class=\"fa fa-fw fa-rotate-left remote-icon\"></i>\n   </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n    \n$('#regular_plus').on('click', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"regular_plus\",\"payload\": \"prev\"});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":730,"y":1520,"wires":[["988671af.8646b"]]},{"id":"5b89c42a.d300e4","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"Ch +","order":15,"width":1,"height":1,"format":"<div id=\"regular_plus\">\n   <md-button class=\"md-button remote-button\">\n      <i class=\"fa fa-fw fa-chevron-up remote-icon\"></i>\n   </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n    \n$('#regular_plus').on('click', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"regular_plus\",\"payload\": \"ch-up\"});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":730,"y":1570,"wires":[["db5e3233.c9fad"]]},{"id":"bc978fd4.0ec948","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"mute","order":14,"width":1,"height":1,"format":"<div id=\"regular_plus\">\n   <md-button class=\"md-button remote-button\">\n      <i class=\"fa fa-fw fa-volume-off remote-icon\"></i>\n   </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n    \n$('#regular_plus').on('click', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"regular_plus\",\"payload\": \"mute\"});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":490,"y":1570,"wires":[["9d7f3cad.d7b8f"]]},{"id":"45e5a406.7764d4","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"vol +","order":13,"width":1,"height":1,"format":"<div id=\"regular_plus\">\n   <md-button class=\"md-button remote-button\">\n      <i class=\"fa fa-fw fa-plus remote-icon\"></i>\n   </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n    \n$('#regular_plus').on('click', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"regular_plus\",\"payload\": \"vol-up\"});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":250,"y":1570,"wires":[["69848a07.c10464"]]},{"id":"701d26ed.1b858","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"vol -","order":16,"width":1,"height":1,"format":"<div id=\"regular_plus\">\n   <md-button class=\"md-button remote-button\">\n      <i class=\"fa fa-fw fa-minus remote-icon\"></i>\n   </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n    \n$('#regular_plus').on('click', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"regular_plus\",\"payload\": \"vol-down\"});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":250,"y":1620,"wires":[["8b474223.183d08"]]},{"id":"2d48b505.8964aa","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"ch list","order":17,"width":1,"height":1,"format":"<div id=\"regular_plus\">\n   <md-button class=\"md-button remote-button\">\n      <i class=\"fa fa-fw fa-list-alt remote-icon\"></i>\n   </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n    \n$('#regular_plus').on('click', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"regular_plus\",\"payload\": \"ch-list\"});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":490,"y":1620,"wires":[["ea7d6c1f.e4e118"]]},{"id":"31d6e767.959288","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"Ch -","order":18,"width":1,"height":1,"format":"<div id=\"regular_plus\">\n   <md-button class=\"md-button remote-button\">\n      <i class=\"fa fa-fw fa-chevron-down remote-icon\"></i>\n   </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n    \n$('#regular_plus').on('click', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"regular_plus\",\"payload\": \"ch-down\"});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":730,"y":1620,"wires":[["9451d6b2.cb6948"]]},{"id":"eabe7d43.b23f48","type":"ui_group","z":"","name":"Full_Remote2","tab":"b128eb09.9f681","order":3,"disp":false,"width":"3","collapse":false},{"id":"6ab22327.a2f71c","type":"ui_group","z":"","name":"HOME","tab":"6d306f92.ccc54","order":1,"disp":true,"width":3,"collapse":false},{"id":"b128eb09.9f681","type":"ui_tab","z":"","name":"HDMI_TV_control","icon":"dashboard","order":7,"disabled":false,"hidden":false},{"id":"6d306f92.ccc54","type":"ui_tab","z":"","name":"TEST","icon":"dashboard","order":3,"disabled":false,"hidden":false}]
133

Very good.

.remote-icon{
        font-size:1.0em;
    }

What do you think about class is here in template?
Can you find it's usage in some buttons?

134

That will change the size of the icon.....

(Gee this takes me back ...... 40 + years, talking em and en sizes. Brain strain. :wink: So long ago!)

135

Have you tried to change the icon sizes? Do they change?
Can you find where exactly the class is used?

If you have time to read, then there is article with size units including the "em"
https://kyleschaeffer.com/css-font-size-em-vs-px-vs-pt-vs-percent

1 Like
136

Sorry.... Got caught up in the nostalgia.

Doing it now.

That will be something like .... button.red and button.red:not if I am not mistaken.

No. Sorry. No it wouldn't. It will just be a qualifier as we did with the num part.

And in the button I would make the code:

<div id="regular_plus">
   <md-button class="md-button remote-button icon">
      <i class="fa fa-2x fa-info-circle remote-icon"></i>
   </md-button>
</div>

But it doesn't seem to be doing anything. Size?

Before I dig myself into too deeper hole, I think I had better stop.

137

I guess it would be good. But on computers these days things seem to be more pixels than em and en sizes.

Though I guess for the real stuff, they are still the yard stick and pixels are for young ones like me who are not as exposed to the older stuff. Though I did study that stuff for a few years.
Because of how things were happening, they became old school stuff and not used as much as they (maybe) should be.

138

(I know I am spinning out of control by saying this, but.... to put the cards on the table)

With the bold bit we did, it was:
.remote-button.num{
and I accessed it by:

<md-button class="md-button remote-button num">2
   </md-button>

So I am a bit confused why this time it isn't:
remote.button.icon
and we do the same thing.

I'm obviously missing something.

139

Ok . The hint

<i class="fa fa-fw fa-plus remote-icon"></i>

And if you do this:

.remote-icon{
        font-size:1.8em;
    }

The icons must change size. All of them

140

Honestly: I'm missing it.

Though, I am on the info button rather than the Volume + button.

The fixed width has me kind of stumped. Why should it be enforced/declared/said. I'm not getting that.

I don't think it is anything to do with this one needing two colours, so I won't waste time on that.