Skip to content

Instantly share code, notes, and snippets.

@reepush

reepush/_description.md

Created August 16, 2015 18:46
Show Gist options
  • Save reepush/9f0b90bb4f39cf6b9404 to your computer and use it in GitHub Desktop.
Save reepush/9f0b90bb4f39cf6b9404 to your computer and use it in GitHub Desktop.
Download ZIP
ШРИ-2015 (задание 1)
Raw
_description.md
Raw
index.jade
- var properties= [
- { heading: 'Тип рейса', key: 'type' },
- { heading: 'Номер рейса', key: 'flight' },
- { heading: 'Авиакомпания', key: 'company', class: 'u-hide-less-900' },
- { heading: 'Авиакомпания', key: 'companyLogo', class: 'u-hide-more-900' },
- { heading: 'Самолет', key: 'airplane', class: 'u-hide-less-800' },
- { heading: 'Самолет', key: 'airplaneShort', class: 'u-hide-more-800' },
- { heading: 'Аэропорт', key: 'airport' },
- { heading: 'Время', key: 'date' },
- { heading: 'Статус', key: 'status' }
- ]
mixin header
thead
tr
each property in properties
th(class=property.class
class=property.key)= property.heading
mixin fixed-header
.fixed-header
table
+header
mixin table
table.flights
+header
tbody
tr(v-repeat='flights'
v-on='click: showPopup(this)')
each property in properties
td(v-text=property.key
class=property.class)
mixin popup
.c-popup(v-show='popup.show')
a.close(v-on='click: popup.show = false') ×
h3 Информация о рейсе
.content
each property in properties
.row
span.heading #{property.heading}:
span.value(v-text='popup.flight.#{property.key}')
mixin controls
.c-controls
label
input(type='radio' value='all' v-model='flightType')
span Все
label
input(type='radio' value='Вылет' v-model='flightType')
span Вылет
label
input(type='radio' value='Прилет' v-model='flightType')
span Прилет
#App
+popup
+controls
.wrapper
+fixed-header
.scroll
+table
Raw
script.js
App()
function App() {
var allFlights = fakeFlights(50)
model = {
flights: allFlights,
flightType: 'all',
popup: {
flight: {},
show: false
}
}
methods = {
showPopup: function(flight) {
model.popup.flight = flight
model.popup.show = true
}
}
var vm = new Vue({
el: '#App',
data: model,
methods: methods
})
vm.$watch('flightType', function(type) {
model.flights = allFlights.filter(function(flight) {
return flight.type == type || type == 'all'
})
})
}
function fakeFlights(n) {
var flights = []
var airports = [
'ATL',
'PEK',
'LHR',
'HND',
'LAX',
'CDG',
'FRA',
'MIA',
'DME'
]
var companies = [
'Qatar Airways',
'Singapore Airlines',
'Cathay Pacific Airways',
'Turkish Airlines',
'Emirates',
'Etihad Airways',
'Transaero Airlines',
'Aeroflot',
'Delta Air Lines'
]
var statuses = [
'Вылетел',
'Прилетел',
'Летит',
'Не долетел'
]
var airplanes = [
{ long: 'Boeing-Stearman Model 75', short: 'BSM75' },
{ long: 'Cessna 172', short: 'C172' },
{ long: 'Ilyushin Il-2', short: 'IL-2' },
{ long: 'Piper J-3 Cub', short: 'PJ-3C' },
{ long: 'Airbus A320 family', short: 'A320' },
{ long: 'Boeing 737', short: 'B737' }
]
var types = ['Прилет', 'Вылет']
while (n--) {
var company = randomArray(companies)
var airplane = randomArray(airplanes)
flights.push({
type: randomArray(types),
flight: rand(20, 40) + '-' + rand(1000, 9000),
company: company,
companyLogo: company[0],
airplane: airplane.long,
airplaneShort: airplane.short,
airport: randomArray(airports),
date: rand(10, 23) + ':' + rand(10, 59),
status: randomArray(statuses)
})
}
return flights
}
function randomArray(array) {
return array[Math.floor(Math.random() * array.length)]
}
function rand(from, to) {
return Math.floor(Math.random() * (to - from + 1)) + from
}
Raw
styles.sass
*, *:before, *:after
box-sizing: border-box
html
height: 100%
body
padding: 20px
height: 100%
#App
height: 100%
table
width: 100%
table-layout: fixed
.wrapper
position: relative
height: 100%
padding-top: 37px
width: 90%
margin: auto
.scroll
height: 100%
overflow: auto
.fixed-header
overflow: hidden
position: absolute
top: 0
left: 0
right: 0
z-index: 1
thead
background-color: #31BC86
td, th
position: relative
padding: 10px
text-align: left
th
color: white
font-weight: bold
// Таблица с рейсами
.flights
overflow: hidden
margin-top: -37px
// Возможность клика на строку
tr
cursor: pointer
tr:hover
background-color: rgba(129, 208, 177, 0.3) !important
// Выделение столбца
td:hover:after
content: ''
position: absolute
background-color: rgba(129, 208, 177, 0.3)
top: -1000px
left: 0
right: 0
height: 2000px
z-index: -1
// Выделяем четные строки
tr:nth-child(2n)
background-color: #F5F5F5
// Скрываем выделение четных строк
// для подстветки строки и столбца
tbody:hover tr:nth-child(2n)
background: none
// Классы медиа-запросов
.u-hide-less-900
@media (max-width: 900px)
display: none
.u-hide-more-900
@media (min-width: 901px)
display: none
.u-hide-less-800
@media (max-width: 800px)
display: none
.u-hide-more-800
@media (min-width: 801px)
display: none
.c-popup
position: fixed
top: 10%
left: 0
right: 0
width: 50%
margin: auto
border: 1px solid #ccc
border-radius: 5px
background-color: white
z-index: 2
padding: 20px
padding-top: 0
line-height: 22x
.close
position: absolute
right: 10px
top: 10px
cursor: pointer
font-size: 20px
.heading
display: inline-block
width: 150px
.value
font-style: italic
.c-controls
margin-bottom: 2em
span
margin-left: 5px
margin-right: 20px
th.company, th.companyLogo
width: 20%
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment