I'm trying to apply material design UI to working web application. Application uses Nginx, PHP, PostgreSQL. I have experience with PHP and PostgreSQL so the application works (code written in notepad++), but it is ugly as I have NO experience with web pages design, java(script) so using only basic html forms, input, button...
I would like to improve the UI so I started learn CSS. I downloaded material icons font and created several buttons, this works great and the buttons also scale to screen size.
h1 { /* color: #999999; */ font-family: arial, sans-serif; font-size: 16px; font-weight: bold; margin-top: 0px; margin-bottom: 3px; text-align: center; } @font-face { /* Material Icons big thanks to: https://google.github.io/material-design-icons/ */ font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url(/font/MaterialIcons-Regular.ttf); /* For IE6-8 */ src: local('Material Icons'), local('MaterialIcons-Regular'), url(/font/MaterialIcons-Regular.ttf) format('truetype'); } .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: clamp(12px,4vmin,30px); display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; /* Support for all WebKit browsers. */ -webkit-font-smoothing: antialiased; /* Support for Safari and Chrome. */ text-rendering: optimizeLegibility; /* Support for Firefox. */ -moz-osx-font-smoothing: grayscale; /* Support for IE. */ font-feature-settings: 'liga'; } .material-icons:hover { color: e3000f; /* background-color: #555; /* Add a dark-grey background on hover */ } #home_button { display: block; position: fixed; /* Fixed/sticky position */ top: 1%; left: 1%; z-index: 99; /* Make sure it does not overlap */ border: none; /* Remove borders */ outline: none; /* Remove outline */ /*background-color: #E5E7E9;*/ /* Set a background color #E5E7E9 = 229R 231G 233B*/ background-color: rgba(229,231,233,0.5); /* Set a background color #E5E7E9 = 229R 231G 233B*/ color: black; /* Text color */ cursor: pointer; /* Add a mouse pointer on hover */ text-align: center; padding-top: 3px; padding-left: 3px; padding-right: 4px; padding-bottom: 0px; border-radius: 5px; /* Rounded corners */ } #home_button:hover { /*background-color: #555; /* Add a dark-grey background on hover */ filter: drop-shadow(2px 2px 2px #555); color: #e3000f; /* Add a dark-grey background on hover */ background-color: rgba(229,231,233,1); /* Set a background color #E5E7E9 = 229R 231G 233B*/ }<!DOCTYPE html> <head> <!-- This line is normally NOT included as font is locally loaded in CSS --><link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- This line is normally NOT included as font is locally loaded in CSS --> </head> <body> <a href="/index.php"><button title="Home Button" id="home_button"><i class="material-icons" >home</i></button></a> <body>Now I would like to include forms, textboxes, checkboxes, buttons... In guide(s) they always rely on node.js. I downloaded node.js and created test application on my local PC, but can not push this to nginx. I found multiple articles with proxyPass, but I can not use node.js on server so this is not solution.
What is the correct way to style the pages into material design and being able to keep all the PHP code and existing functionality?
To specify example what I'm trying to accomplish is to move FROM this simple HTML form (simplified here, in reality generated by PHP):
<!DOCTYPE html> <html> <head> <title>Form sample</title> </head> <body> <form action="/sample_form.php"> <label for="sample_input">Sample:</label><br> <input type="text" id="sample_input" name="sample_input" value="Empty"> <input type="submit" value="Submit"> </form> </body> </html>TO material design form with outlined text fields and outlined button. In below sample there is material design html syntax, but missing correct css and javascript so it is not looking as on above links. Where/how to get it and make it run on Nginx without node.js?
<!DOCTYPE html> <html> <head> <title>Form sample</title> </head> <body> <form action="/sample_form.php"> <label class="mdc-text-field mdc-text-field--outlined"> <span class="mdc-notched-outline"> <span class="mdc-notched-outline__leading"></span> <span class="mdc-notched-outline__notch"> <span class="mdc-floating-label" id="sample_input">Sample:</span> </span> <span class="mdc-notched-outline__trailing"></span> </span> <input type="text" value="Empty" class="mdc-text-field__input" aria-labelledby="sample_input"> </label> <button class="mdc-button mdc-button--outlined"> <div class="mdc-button__ripple"></div> <span class="mdc-button__label">Submit</span> </button> </form> </body> </html>All the tutorials are heavily depending on node.js. Is it really possible to use material design only on node.js? If yes can the node.js code (locally developed) be exported and used on Nginx WITHOUT node.js?
Apologize in advance if my questions are newbie ones, but I read all the available manuals and was not able to find solution.
https://stackoverflow.com/questions/65556092/material-design-on-nginx January 04, 2021 at 07:43AM
没有评论:
发表评论