Skip to content

Commit

Permalink
feat: add bootstrap
Browse files Browse the repository at this point in the history
  • Loading branch information
mikhailmogilnikov committed Jan 8, 2024
1 parent fe25dd7 commit d1faafa
Show file tree
Hide file tree
Showing 7 changed files with 172 additions and 28 deletions.
59 changes: 51 additions & 8 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

15 changes: 9 additions & 6 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,10 @@
"@babel/core": "^7.20.12",
"@babel/eslint-parser": "^7.19.1",
"@babel/preset-env": "^7.20.2",
"autoprefixer": "^10.4.16",
"babel-jest": "^29.3.1",
"babel-loader": "^9.1.2",
"css-loader": "^6.7.3",
"css-loader": "^6.8.1",
"debug": "^4.3.4",
"eslint": "^8.31.0",
"eslint-config-airbnb": "^19.0.4",
Expand All @@ -42,18 +43,20 @@
"jest": "^29.3.1",
"jest-cli": "^29.3.1",
"jest-environment-jsdom": "^29.3.1",
"postcss-loader": "^7.2.4",
"postcss-loader": "^7.3.4",
"postcss-preset-env": "^7.8.3",
"style-loader": "^3.3.1",
"sass": "^1.69.7",
"sass-loader": "^13.3.3",
"style-loader": "^3.3.3",
"url-loader": "^4.1.1",
"webpack": "^5.76.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.11.1"
},
"dependencies": {
"@popperjs/core": "^2.11.8",
"ajv": "^8.12.0",
"npm-check-updates": "^16.6.2",
"sass": "^1.57.1",
"sass-loader": "^13.2.0"
"bootstrap": "^5.3.2",
"npm-check-updates": "^16.6.2"
}
}
3 changes: 2 additions & 1 deletion src/index.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
// @ts-check

import 'bootstrap';
import init from './init.js';
import './style.css';
import './style.scss';

init();
7 changes: 2 additions & 5 deletions src/init.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
// @ts-check

import Example from './Example.js';

export default () => {
const element = document.getElementById('point');
const obj = new Example(element);
obj.init();
const element = document.getElementById('body');
console.log(element);
};
4 changes: 0 additions & 4 deletions src/style.css

This file was deleted.

1 change: 1 addition & 0 deletions src/style.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
@import "~bootstrap/scss/bootstrap";
111 changes: 107 additions & 4 deletions template.html
Original file line number Diff line number Diff line change
@@ -1,9 +1,112 @@
<!doctype html>
<!DOCTYPE html>
<html>
<head>
<title>Webpack Package</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>RSS Агрегатор</title>
</head>
<body>
<div id="point"></div>
<body class="d-flex flex-column min-vh-100">
<div
class="modal fade"
id="modal"
tabindex="-1"
role="dialog"
aria-labelledby="modal"
aria-hidden="true"
>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
<button
type="button"
class="btn-close close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body text-break"></div>
<div class="modal-footer">
<a
class="btn btn-primary full-article"
href="#"
role="button"
target="_blank"
rel="noopener noreferrer"
>Читать полностью </a
><button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal"
>
Закрыть
</button>
</div>
</div>
</div>
</div>
<main class="flex-grow-1">
<section class="container-fluid bg-dark p-5">
<div class="row">
<div class="col-md-10 col-lg-8 mx-auto text-white">
<h1 class="display-3 mb-0">RSS агрегатор</h1>
<p class="lead">
Начните читать RSS сегодня! Это легко, это красиво.
</p>
<form action="" class="rss-form text-body">
<div class="row">
<div class="col">
<div class="form-floating">
<input
id="url-input"
autofocus=""
required=""
name="url"
aria-label="url"
class="form-control w-100"
placeholder="ссылка RSS"
autocomplete="off"
/>
<label for="url-input">Ссылка RSS</label>
</div>
</div>
<div class="col-auto">
<button
type="submit"
aria-label="add"
class="h-100 btn btn-lg btn-primary px-sm-5"
>
Добавить
</button>
</div>
</div>
</form>
<p class="mt-2 mb-0 text-muted">
Пример: https://lorem-rss.hexlet.app/feed
</p>
<p class="feedback m-0 position-absolute small text-danger"></p>
</div>
</div>
</section>
<section class="container-fluid container-xxl p-5">
<div class="row">
<div class="col-md-10 col-lg-8 order-1 mx-auto posts"></div>
<div
class="col-md-10 col-lg-4 mx-auto order-0 order-lg-1 feeds"
></div>
</div>
</section>
</main>
<footer class="footer border-top py-3 mt-5 bg-light">
<div class="container-xl">
<div class="text-center">
created by
<a
href="https://ru.hexlet.io/professions/frontend/projects/11"
target="_blank"
>Hexlet</a
>
</div>
</div>
</footer>
</body>
</html>

0 comments on commit d1faafa

Please sign in to comment.