HM-55. Поставил favicon, изменил title, название кнопок и цвет кнопок (#23)

This commit is contained in:
Михаил
2020-07-23 00:27:09 +03:00
committed by GitHub
parent 1cd0e7f768
commit 7a1e9f1a49
7 changed files with 15 additions and 6 deletions

View File

@ -4,7 +4,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> <title>Storage Service</title>
</head> </head>
<body> <body>
@ -13,6 +13,7 @@
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="Logo__box"> <div class="Logo__box">
</div> </div>
<p class="h3 text-light bg-dark">Storage Service</p>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>

View File

@ -1,7 +1,8 @@
import Component from '../component/index'; import Component from '../component/index';
import routeService from '../../services/RouteService'; import routeService from '../../services/RouteService';
import ButtonComponent from '../button-component/ButtonComponent'; import ButtonComponent from '../button-component/ButtonComponent';
import Image from '../../img/logo.png'; import Image from '../../img/logo.svg';
import './NavButtonComponent.css'; import './NavButtonComponent.css';
class NavButtonComponent extends Component { class NavButtonComponent extends Component {
@ -12,7 +13,7 @@ class NavButtonComponent extends Component {
this.logoImg = document.createElement('img'); this.logoImg = document.createElement('img');
this.logoImg.src = Image; this.logoImg.src = Image;
this.logoImg.alt = 'logo'; this.logoImg.alt = 'logo';
this.logoImg.className = 'Logo'; this.logoImg.className = 'Logo mr-0';
this.logoBox = this.mainNode.querySelector('.Logo__box'); this.logoBox = this.mainNode.querySelector('.Logo__box');
this.logoBox.appendChild(this.logoImg); this.logoBox.appendChild(this.logoImg);
} }

View File

@ -1,14 +1,18 @@
export const NAV_MENU = [ export const NAV_MENU = [
{ {
title: 'Home', title: 'Главная',
url: '/' url: '/'
}, },
{ {
title: 'Api', title: 'Список хранилищ',
url: '/api' url: '/api'
}, },
{ {
title: 'Журнал', title: 'Журнал',
url: '/logs' url: '/logs'
}, },
{
title: 'Контакты',
url: '/'
},
]; ];

BIN
src/img/favicon-16x16.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 618 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 32 KiB

1
src/img/logo.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" ?><svg enable-background="new 0 0 512 512" id="Layer_1" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><g><linearGradient gradientUnits="userSpaceOnUse" id="SVGID_1_" x1="0.0000038" x2="512" y1="256" y2="256"><stop offset="0" style="stop-color:#F67950"/><stop offset="1" style="stop-color:#F15A29"/></linearGradient><circle cx="256" cy="256" fill="url(#SVGID_1_)" r="256"/><linearGradient gradientUnits="userSpaceOnUse" id="SVGID_2_" x1="42.6666679" x2="469.3333435" y1="256.0005188" y2="256.0005188"><stop offset="0" style="stop-color:#F15A29"/><stop offset="1" style="stop-color:#F67950"/></linearGradient><path d="M256,469.3338623c-117.6314697,0-213.3333282-95.7023926-213.3333282-213.3333435 c0-117.6314545,95.7018585-213.333313,213.3333282-213.333313c117.6357422,0,213.3333435,95.7018661,213.3333435,213.333313 C469.3333435,373.6314697,373.6357422,469.3338623,256,469.3338623z" fill="url(#SVGID_2_)"/></g><path d="M383.9995728,246.8735962V144H144v102.8735962h30.7237396v34.2528076H144v102.8730774h239.9995728 V281.1264038h-30.7190552v-34.2528076H383.9995728z M310.3045349,170.8735962 c13.5664063,0,24.5632019,10.9973297,24.5632019,24.5626678c0,13.5664063-10.9967957,24.5632019-24.5632019,24.5632019 c-13.5653381,0-24.5626831-10.9967957-24.5626831-24.5632019 C285.7418518,181.8709259,296.7391968,170.8735962,310.3045349,170.8735962z M169.8608856,176.988266h69.0527191v10h-69.0527191 V176.988266z M169.8608856,213.8874664v-10h69.0527191v10H169.8608856z M238.9136047,351.0112h-69.0527191v-10h69.0527191V351.0112 z M238.9136047,324.1119995h-69.0527191v-10h69.0527191V324.1119995z M310.3045349,357.1258545 c-13.5653381,0-24.5621338-10.9973145-24.5621338-24.5632019C285.7424011,318.997345,296.7391968,308,310.3045349,308 c13.5664063,0,24.5632019,10.997345,24.5632019,24.5626526C334.8677368,346.12854,323.8709412,357.1258545,310.3045349,357.1258545 z M343.2805176,281.1264038h-158.556778v-34.2528076h158.556778V281.1264038z" opacity="0.3"/><path d="M375.9995728,238.8735962V136H136v102.8735962h30.7237396v34.2528076H136v102.8730774h239.9995728 V273.1264038h-30.7190552v-34.2528076H375.9995728z M302.3045349,162.8735962 c13.5664063,0,24.5632019,10.9973297,24.5632019,24.5626678c0,13.5664063-10.9967957,24.5632019-24.5632019,24.5632019 c-13.5653381,0-24.5626831-10.9967957-24.5626831-24.5632019 C277.7418518,173.8709259,288.7391968,162.8735962,302.3045349,162.8735962z M161.8608856,168.988266h69.0527191v10h-69.0527191 V168.988266z M161.8608856,205.8874664v-10h69.0527191v10H161.8608856z M230.9136047,343.0112h-69.0527191v-10h69.0527191V343.0112 z M230.9136047,316.1119995h-69.0527191v-10h69.0527191V316.1119995z M302.3045349,349.1258545 c-13.5653381,0-24.5621338-10.9973145-24.5621338-24.5632019C277.7424011,310.997345,288.7391968,300,302.3045349,300 c13.5664063,0,24.5632019,10.997345,24.5632019,24.5626526C326.8677368,338.12854,315.8709412,349.1258545,302.3045349,349.1258545 z M335.2805176,273.1264038h-158.556778v-34.2528076h158.556778V273.1264038z" fill="#FFFFFF"/></g></svg>

After

Width:  |  Height:  |  Size: 3.1 KiB

View File

@ -35,12 +35,14 @@ module.exports = (env, argv) => ({
new CleanWebpackPlugin(), new CleanWebpackPlugin(),
new HtmlWebpackPlugin({ new HtmlWebpackPlugin({
filename: 'index.html', filename: 'index.html',
template: './src/app.html' template: './src/app.html',
favicon: './src/img/favicon-16x16.png',
}), }),
new MiniCssExtractPlugin({ new MiniCssExtractPlugin({
filename: '[hash].css', filename: '[hash].css',
}), }),
], ],
module: { module: {
rules: [ rules: [
{ {