Zhicheng Wang
parent
3c666d881e
commit
20bf6c0085
|
|
@ -105,6 +105,12 @@
|
|||
"intro": "废弃的Beta版路由"
|
||||
},
|
||||
|
||||
"router": {
|
||||
"title": "路由与导航",
|
||||
"intro": "揭示如何通过Angular 2路由进行基本的屏幕导航。",
|
||||
"hide": true
|
||||
},
|
||||
|
||||
"structural-directives": {
|
||||
"title": "结构型指令",
|
||||
"intro": "Angular有一个强力的模板引擎，它能让你轻松维护元素的DOM树结构。"
|
||||
|
|
|
|||
|
|
@ -1,122 +1,240 @@
|
|||
:marked
|
||||
We write **unit tests** to explore and confirm the **behavior** of parts of our application.
|
||||
|
||||
我们编写**单元测试**来探索和确认我们应用程序的**行为**部分。
|
||||
我们编写**单元测试**来探索并巩固应用程序中的**行为**部分。
|
||||
|
||||
1. They **guard** against breaking existing code (“regressions”) when we make changes.
|
||||
1. 当我们改变代码是，它们**守护**已有代码，以防被破坏。
|
||||
|
||||
1. 当我们做出修改时，它们会**守护**已有代码(回归测试)，防止其被破坏。
|
||||
|
||||
1. They **clarify** what the code does both when used as intended and when faced with deviant conditions.
|
||||
1. 在我们正确使用代码和面对异常情况时，它们**澄清**代码做什么。
|
||||
|
||||
1. 当我们正确使用代码和面对异常情况时，它们会让代码的用途更加**明晰**。
|
||||
|
||||
1. They **reveal** mistakes in design and implementation. Tests force us to look at our code from many angles. When a part of our application seems hard to test, we may have discovered a design flaw, something we can cure now rather than later when it becomes expensive to fix.
|
||||
1. 它们**揭示**我们设计和实现的错误。测试强迫我们从多个角度看代码。当应用程序的一个部分看起来很难测试，我们可能会发现设计缺陷，这是我们可以立刻修复的，而不是等到它变得很难修复的时候。
|
||||
|
||||
1. 它们会**揭露**我们设计和实现中的错误。测试会强迫我们从多种角度看代码。如果应用程序的一个部分看起来很难测试，这可能就意味着存在设计缺陷。
|
||||
我们可以立即修复它，而不用等到它变得不可收拾的那一天。
|
||||
|
||||
a(id="top")
|
||||
:marked
|
||||
# Table of Contents
|
||||
|
||||
# 目录
|
||||
|
||||
1. [Jasmine Testing 101](#jasmine-101)
|
||||
1. [Jasmine测试101](#jasmine-101)
|
||||
|
||||
1. [Jasmine测试简介](#jasmine-101)
|
||||
|
||||
- setup to run Jasmine tests in the browser
|
||||
- 设置浏览器来运行Jasmine测试
|
||||
|
||||
- 设置浏览器，来运行Jasmine测试
|
||||
|
||||
- basic Jasmine testing skills
|
||||
- 基础Jasmine测试技能
|
||||
|
||||
- Jasmine测试的基本技能
|
||||
|
||||
- write simple Jasmine tests in TypeScript
|
||||
- 实用TypeScript来编写简单的Jasmine测试
|
||||
|
||||
- 用TypeScript编写简单的Jasmine测试
|
||||
|
||||
- debug a test in the browser
|
||||
- 在浏览器里调试测试
|
||||
|
||||
- 在浏览器里调试一个测试
|
||||
|
||||
1. [The Application Under Test](#aut)
|
||||
|
||||
1. [被测试的应用程序](#aut)
|
||||
|
||||
1. [First app test](#first-app-tests)
|
||||
|
||||
1. [第一个应用程序测试](#first-app-tests)
|
||||
|
||||
- test a simple application interface outside of Angular
|
||||
|
||||
- 在Angular之外，测试一个简单的应用程序接口
|
||||
|
||||
- where to put the test file
|
||||
|
||||
- 测试文件存放到哪儿
|
||||
|
||||
- load a test file with systemJS
|
||||
|
||||
- 使用systemJS调用一个测试文件
|
||||
|
||||
1. [Pipe driven development](#pipe-testing)
|
||||
|
||||
1. [测试驱动开发一个管道](#pipe-testing)
|
||||
|
||||
- create a test before creating a class
|
||||
- 在新建类之前，新建一个测试
|
||||
|
||||
- 创建类之前，先创建一个测试
|
||||
|
||||
- load multiple test files in our test harness, using system.js
|
||||
- 使用system.js，加载多个测试文件到我们的测试套装里
|
||||
|
||||
- 使用system.js，往我们的测试套件里加载多个测试文件
|
||||
|
||||
- add the Angular 2 library to our test harness
|
||||
- 添加Angular 2的类库到我们的测试套装里
|
||||
|
||||
- 往我们的测试套件里添加Angular 2的类库
|
||||
|
||||
- watch the new test fail, and fix it
|
||||
|
||||
- 看着新测试失败，然后修复它
|
||||
|
||||
1. Test an Asynchronous Service (forthcoming)
|
||||
|
||||
1. 测试异步服务(即将到来)
|
||||
|
||||
- test an asynchronous service class outside of Angular
|
||||
|
||||
- 在Angular外测试异步服务类
|
||||
|
||||
- write a test plan in code
|
||||
|
||||
- 用代码写测试计划
|
||||
|
||||
- fake a dependency
|
||||
|
||||
- 伪造一个依赖
|
||||
|
||||
- master the `catch(fail).then(done)` pattern
|
||||
|
||||
- 掌握`catch(fail).then(done)`模式
|
||||
|
||||
- move setup to `beforeEach`
|
||||
|
||||
- 把设置工作移入`beforeEach`
|
||||
|
||||
- test when a dependency fails
|
||||
|
||||
- 测试依赖失败时的情况
|
||||
|
||||
- control async test timeout
|
||||
|
||||
- 控制异步测试的超时时间
|
||||
|
||||
1. The Angular Test Environment (forthcoming)
|
||||
|
||||
1. Angular测试环境（即将到来）
|
||||
|
||||
- the Angular test environment and why we need help
|
||||
|
||||
- Angular测试环境以及我们为什么需要它的帮助
|
||||
|
||||
- add the Angular Test libraries to the test harness
|
||||
|
||||
- 把Angular测试库加入测试挽具中
|
||||
|
||||
- test the same async service using Angular Dependency Injection
|
||||
|
||||
- 使用Angular依赖注入测试同一个异步服务
|
||||
|
||||
- reduce friction with test helpers
|
||||
|
||||
- 减少与测试助手的摩擦
|
||||
|
||||
- introducing spies
|
||||
|
||||
- 引入侦探类
|
||||
|
||||
1. Test a Component (forthcoming)
|
||||
|
||||
1. 测试组件（即将到来）
|
||||
|
||||
- test the component outside of Angular
|
||||
|
||||
- 在Angular外面测试组件
|
||||
|
||||
- mock the dependent asynchronous service
|
||||
|
||||
- 模拟所依赖的异步服务
|
||||
|
||||
- simulate interaction with the view (no DOM)
|
||||
|
||||
- 仿真与视图的交互（不涉及DOM）
|
||||
|
||||
- use a spy-promise to control asynchronous test flow
|
||||
|
||||
- 使用侦探型承诺(spy-promise)来控制异步测试工作流
|
||||
|
||||
1. Test a Component in the DOM (forthcoming
|
||||
|
||||
1. 在DOM中测试组件（即将到来）
|
||||
|
||||
- test the component inside the Angular test environment
|
||||
|
||||
- 在Angular测试环境中测试组件
|
||||
|
||||
- use the `TestComponentBuilder`
|
||||
|
||||
- 使用`TestComponentBuilder`
|
||||
|
||||
- more test helpers
|
||||
|
||||
- 更多测试助手
|
||||
|
||||
- interact with the DOM
|
||||
|
||||
- 与DOM交互
|
||||
|
||||
- bind to a mock dependent asynchronous service
|
||||
|
||||
- 绑定到一个模拟的异步服务
|
||||
|
||||
1. Run the tests with karma (forthcoming)
|
||||
|
||||
1. 用Karma运行测试（即将到来）
|
||||
|
||||
It’s a big agenda. Fortunately, you can learn a little bit at a time and put each lesson to use.
|
||||
|
||||
这是一个很大的日程表。幸运的是，我们可以一次只学一小点，然后把它们投入实战。
|
||||
|
||||
a(href="#top").to-top Back to top
|
||||
|
||||
.l-hr
|
||||
a(id="jasmine-101")
|
||||
:marked
|
||||
# Jasmine Testing 101
|
||||
# Jasmine测试101
|
||||
|
||||
# Jasmine测试简介
|
||||
|
||||
!= partial("../testing/jasmine-testing-101")
|
||||
a(href="#top").to-top Back to top
|
||||
a(href="#top").to-top 回到顶部
|
||||
|
||||
.l-hr
|
||||
a(id="aut")
|
||||
:marked
|
||||
# The Application to Test
|
||||
|
||||
# 被测试的应用程序
|
||||
|
||||
!= partial("../testing/application-under-test")
|
||||
a(href="#top").to-top Back to top
|
||||
a(href="#top").to-top 回到顶部
|
||||
|
||||
.l-hr
|
||||
a(id="first-app-tests")
|
||||
:marked
|
||||
# First app test
|
||||
|
||||
# 第一个应用程序测试
|
||||
|
||||
!= partial("../testing/first-app-tests")
|
||||
a(href="#top").to-top Back to top
|
||||
a(href="#top").to-top 回到顶部
|
||||
|
||||
.l-hr
|
||||
a(id="pipe-testing")
|
||||
:marked
|
||||
# Pipe driven development
|
||||
|
||||
# 测试驱动开发一个管道
|
||||
|
||||
!= partial("../testing/testing-an-angular-pipe")
|
||||
a(href="#top").to-top Back to top
|
||||
a(href="#top").to-top 回到顶部
|
||||
|
||||
.alert.is-important
|
||||
:marked
|
||||
|
|
|
|||
|
|
@ -2146,7 +2146,7 @@ code-example(format="").
|
|||
|
||||
:marked
|
||||
## Saying Goodbye to Angular 1
|
||||
## 再见，Angular
|
||||
## 再见，Angular 1
|
||||
|
||||
It is time to take off the training wheels and let our application begin
|
||||
its new life as a pure, shiny Angular 2 app. The remaining tasks all have to
|
||||
|
|
@ -2218,7 +2218,11 @@ code-example(format="").
|
|||
used as a valuable safety measure when ensuring that the application does not
|
||||
break during the upgrade. E2E tests are especially useful for this purpose.
|
||||
|
||||
测试不仅要在升级过程中被保留，它还是确保应用在升级过程中不会被破坏的一个安全指示器。
|
||||
要达到这个目的，E2E测试尤其有用。
|
||||
|
||||
## E2E Tests
|
||||
## E2E测试
|
||||
|
||||
The PhoneCat project has both E2E Protractor tests and some Karma unit tests in it.
|
||||
Of these two, E2E tests can be dealt with much more easily: By definition,
|
||||
|
|
@ -2229,17 +2233,32 @@ code-example(format="").
|
|||
test suite should keep passing with just minor modifications. This is because
|
||||
we don't change how the application behaves from the user's point of view.
|
||||
|
||||
PhoneCat项目中同时有基于Protractor的E2E测试和一些基于Karma的单元测试。
|
||||
对这两者来说，E2E测试的转换要容易得多：根据定义，E2E测试通过与应用中显示的这些UI元素互动，从*外部*访问我们的应用来进行测试。
|
||||
E2E测试实际上并不关心这些应用中各部件的内部结构。这也意味着，虽然我们已经修改了一点儿此应用程序，
|
||||
但是E2E测试套件仍然应该能像以前一样全部通过。因为从用户的角度来说，我们并没有改变应用的行为。
|
||||
|
||||
During TypeScript conversion, there is nothing we have to do to keep E2E tests
|
||||
working. It is only when we start to upgrade components and their template to Angular 2
|
||||
that we need to make some changes. This is because the E2E tests have matchers
|
||||
that are specific to Angular 1. For PhoneCat we need to make the following changes
|
||||
in order to make things work with Angular 2:
|
||||
|
||||
在转成TypeScript期间，我们不用做什么就能让E2E测试正常工作。
|
||||
只有当我们想做些修改而把组件及其模板升级到Angular 2时才需要做些处理。
|
||||
这是因为E2E测试有一些匹配器是Angular 1中特有的。对于PhoneCat来说，为了让它能在Angular 2下工作，我们得做下列修改：
|
||||
|
||||
table
|
||||
tr
|
||||
th Previous code
|
||||
th New code
|
||||
th Notes
|
||||
th
|
||||
p Previous code
|
||||
p 老代码
|
||||
th
|
||||
p New code
|
||||
p 新代码
|
||||
th
|
||||
p Notes
|
||||
p 说明
|
||||
tr
|
||||
td
|
||||
:marked
|
||||
|
|
@ -2250,6 +2269,8 @@ table
|
|||
td
|
||||
:marked
|
||||
The repeater matcher relies on Angular 1 `ng-repeat`
|
||||
|
||||
repeater匹配器依赖于Angular 1中的`ng-repeat`
|
||||
tr
|
||||
td
|
||||
:marked
|
||||
|
|
@ -2260,6 +2281,8 @@ table
|
|||
td
|
||||
:marked
|
||||
The repeater matcher relies on Angular 1 `ng-repeat`
|
||||
|
||||
repeater匹配器依赖于Angular 1中的`ng-repeat`
|
||||
tr
|
||||
td
|
||||
:marked
|
||||
|
|
@ -2270,6 +2293,8 @@ table
|
|||
td
|
||||
:marked
|
||||
The model matcher relies on Angular 1 `ng-model`
|
||||
|
||||
model匹配器依赖于Angular 1中的`ng-model`
|
||||
tr
|
||||
td
|
||||
:marked
|
||||
|
|
@ -2280,6 +2305,8 @@ table
|
|||
td
|
||||
:marked
|
||||
The model matcher relies on Angular 1 `ng-model`
|
||||
|
||||
model匹配器依赖于Angular 1中的`ng-model`
|
||||
tr
|
||||
td
|
||||
:marked
|
||||
|
|
@ -2291,6 +2318,7 @@ table
|
|||
:marked
|
||||
The binding matcher relies on Angular 1 data binding
|
||||
|
||||
binding匹配器依赖于Angular 1的数据绑定
|
||||
|
||||
:marked
|
||||
When the bootstrap method is switched from that of `UpgradeAdapter` to
|
||||
|
|
@ -2299,6 +2327,10 @@ table
|
|||
an Angular 1 app anymore, but instead it should find *Angular 2 apps* from
|
||||
the page. The following change is then needed in `protractor-conf.js`:
|
||||
|
||||
当引导方式从`UpgradeAdapter`切换到纯Angular 2的时，Angular 1就从页面中完全消失了。
|
||||
此时，我们需要告诉Protractor，它不用再找Angular 1应用了，而是从页面中查找*Angular 2*应用。
|
||||
于是在`protractor-conf.js`中做下列修改：
|
||||
|
||||
code-example(format="").
|
||||
useAllAngular2AppRoots: true,
|
||||
|
||||
|
|
@ -2309,11 +2341,16 @@ code-example(format="").
|
|||
that use WebDriver's generic URL APIs instead. The first of these is
|
||||
the redirection spec:
|
||||
|
||||
同样，我们的测试代码中有两个Protractor API调用内部使用了`$location`。该服务没有了，
|
||||
我们就得把这些调用用一个WebDriver的通用URL API代替。第一个API是“重定向(redirect)”规约：
|
||||
|
||||
+makeExample('upgrade-phonecat-3-final/e2e-spec.js', 'redirect', 'e2e-tests/scenarios.js')
|
||||
|
||||
:marked
|
||||
And the second is the phone links spec:
|
||||
|
||||
第二个是“电话链接(phone links)”规约：
|
||||
|
||||
+makeExample('upgrade-phonecat-3-final/e2e-spec.js', 'links', 'e2e-tests/scenarios.js')
|
||||
|
||||
|
||||
|
|
@ -2321,17 +2358,27 @@ code-example(format="").
|
|||
:marked
|
||||
## Unit Tests
|
||||
|
||||
## 单元测试
|
||||
|
||||
For unit tests, on the other hand, more conversion work is needed. Effectively
|
||||
they need to be *upgraded* along with the production code.
|
||||
|
||||
另一方面，对于单元测试来说，需要更多的转化工作。实际上，它们需要随着产品代码一起升级。
|
||||
|
||||
During TypeScript conversion no changes are strictly necessary. But it may be
|
||||
a good idea to convert the unit test code into TypeScript as well, as the same
|
||||
benefits we from TypeScript in production code also applies to tests.
|
||||
|
||||
在转成TypeScript期间，严格来讲没有什么改动是必须的。但把单元测试代码转成TypeScript仍然是个好主意，
|
||||
产品代码从TypeScript中获得的那些增益也同样适用于测试代码。
|
||||
|
||||
For instance, in the phone detail component spec we can use not only ES2015
|
||||
features like arrow functions and block-scoped variables, but also type
|
||||
definitions for some of the Angular 1 services we're consuming:
|
||||
|
||||
比如，在这个电话详情组件的规约中，我们不仅用到了ES2015中的箭头函数和块作用域变量这些特性，还为所用的一些
|
||||
Angular 1服务提供了类型定义。
|
||||
|
||||
+makeExample('upgrade-phonecat-1-typescript/ts/app/phone-detail/phone-detail.component.spec.ts', null, 'app/phone-detail/phone-detail.component.spec.ts')
|
||||
|
||||
:marked
|
||||
|
|
@ -2339,15 +2386,22 @@ code-example(format="").
|
|||
are needed for Karma. We need to let SystemJS load all the new Angular 2 code,
|
||||
which can be done with the following kind of shim file:
|
||||
|
||||
一旦我们开始了升级过程并引入了SystemJS，还需要对Karma进行配置修改。
|
||||
我们需要让SystemJS加载所有的Angular 2新代码，
|
||||
|
||||
+makeExample('upgrade-phonecat-2-hybrid/ts/karma-test-shim.1.js', null, 'karma-test-shim.js')
|
||||
|
||||
:marked
|
||||
The shim first loads the SystemJS configuration, then Angular 2's test support libraries,
|
||||
and then the application's spec files themselves.
|
||||
|
||||
这个shim文件首先加载了SystemJS的配置，然后是Angular 2的测试支持库，然后是应用本身的规约文件。
|
||||
|
||||
Karma configuration should then be changed so that it uses the application root dir
|
||||
as the base directory, instead of `app`.
|
||||
|
||||
然后需要修改Karma配置，来让它使用本应用的根目录作为基础目录(base directory)，而不是`app`。
|
||||
|
||||
+makeExample('upgrade-phonecat-2-hybrid/ts/karma.conf.ng1.js', 'basepath', 'karma.conf.js')
|
||||
|
||||
:marked
|
||||
|
|
@ -2355,12 +2409,17 @@ code-example(format="").
|
|||
for loading application files so that they are *not* included to the page by Karma. We'll let
|
||||
the shim and SystemJS load them.
|
||||
|
||||
一旦这些完成了，我们就能加载SystemJS和其它依赖，并切换配置文件来加载那些应用文件，而*不用*在Karma页面中包含它们。
|
||||
我们要让这个shim文件和SystemJS去加载它们。
|
||||
|
||||
+makeExample('upgrade-phonecat-2-hybrid/ts/karma.conf.ng1.js', 'files', 'karma.conf.js')
|
||||
|
||||
:marked
|
||||
Since the HTML templates of Angular 2 components will be loaded as well, we need to help
|
||||
Karma out a bit so that it can route them to the right paths:
|
||||
|
||||
由于Angular 2组件中的HTML模板也同样要被加载，所以我们得帮Karma一把，帮它在正确的路径下找到这些模板：
|
||||
|
||||
+makeExample('upgrade-phonecat-2-hybrid/ts/karma.conf.ng1.js', 'html', 'karma.conf.js')
|
||||
|
||||
:marked
|
||||
|
|
@ -2368,18 +2427,24 @@ code-example(format="").
|
|||
counterparts are switched. The specs for the checkmark pipe are probably the most straightforward,
|
||||
as the pipe has no dependencies:
|
||||
|
||||
如果产品代码被切换到了Angular 2，单元测试文件本身也需要切换过来。对勾儿(checkmark)管道的规约可能是最简单的，因为它没有任何依赖：
|
||||
|
||||
+makeExample('upgrade-phonecat-2-hybrid/ts/app/core/checkmark/checkmark.pipe.spec.ts', null, 'app/core/checkmark/checkmark.pipe.spec.ts')
|
||||
|
||||
:marked
|
||||
The unit test for the phone service is a bit more involved. We need to switch from the mocked-out
|
||||
Angular 1 `$httpBackend` to a mocked-out Angular 2 Http backend.
|
||||
|
||||
`Phone`服务的测试会牵扯到一点别的。我们需要把模拟版的Angular 1 `$httpBackend`服务切换到模拟板的Angular 2 Http后端。
|
||||
|
||||
+makeExample('upgrade-phonecat-2-hybrid/ts/app/core/phone/phone.service.spec.ts', null, 'app/core/phone/phone.service.spec.ts')
|
||||
|
||||
:marked
|
||||
For the component specs we can mock out the `Phone` service itself, and have it provide
|
||||
canned phone data. We use Angular's component unit testing APIs for both components.
|
||||
|
||||
对于组件的规约，我们可以模拟出`Phone`服务本身，并且让它提供电话的数据。我们可以对这些组件使用Angular的组件单元测试API。
|
||||
|
||||
+makeExample('upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.spec.ts', null, 'app/phone-detail/phone-detail.component.spec.ts')
|
||||
|
||||
+makeExample('upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.spec.ts', null, 'app/phone-list/phone-list.component.spec.ts')
|
||||
|
|
@ -2390,10 +2455,15 @@ code-example(format="").
|
|||
router. For the details component we need to provide an Angular 2 `RouteParams` object
|
||||
instead of using the Angular 1 `$routeParams`.
|
||||
|
||||
最后，当我们切换到Angular 2路由时，我们需要重新过一遍这些组件测试。对详情组件来说，我们需要提供一个Angular 2的
|
||||
`RouteParams`对象，而不再用Angular 1的`$routeParams`。
|
||||
|
||||
+makeExample('upgrade-phonecat-3-final/ts/app/phone-detail/phone-detail.component.spec.ts', 'routeparams', 'app/phone-detail/phone-detail.component.spec.ts')
|
||||
|
||||
:marked
|
||||
And for the phone list component we need to set up a few things for the router itself so that
|
||||
the route link directive will work.
|
||||
|
||||
对于电话列表组件来说，我们需要为路由器本身略作设置，以便它的路由链接(`routerLink`)指令能够正常工作。
|
||||
|
||||
+makeExample('upgrade-phonecat-3-final/ts/app/phone-list/phone-list.component.spec.ts', 'routestuff', 'app/phone-list/phone-list.component.spec.ts')
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ include ../_util-fns
|
|||
It's an excellent alternative to the *SystemJS* approach we use throughout the documentation.
|
||||
In this guide we get a taste of Webpack and how to use it with Angular 2 applications.
|
||||
|
||||
这是我们在文档中到处使用的这个*SystemJS*的一个卓越替代品。这篇指南会带我们尝尝Webpack的滋味，并学习如何在Angular 2程序中使用它。
|
||||
这是我们在文档中到处使用的这个*SystemJS*的一个优秀替代品。这篇指南会带我们尝尝Webpack的滋味，并学习如何在Angular 2程序中使用它。
|
||||
|
||||
<a id="top"></a>
|
||||
## Table of contents
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
|
||||
1. Jasmine Testing 101
|
||||
|
||||
1. Jasmine测试101
|
||||
1. Jasmine测试简介
|
||||
|
||||
- setup to run Jasmine tests in the browser
|
||||
|
||||
|
|
|
|||
|
|
@ -337,7 +337,7 @@ figure.image-display
|
|||
|
||||
Congratulations … you’ve completed Jasmine testing 101.
|
||||
|
||||
恭喜...你完成了Jasmine测试101。
|
||||
恭喜...你完成了Jasmine测试简介。
|
||||
|
||||
Now that we’re familiar with Jasmine on its own, we’re ready to test an application.
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
box-shadow: 3px 0px 6px rgba($coal, .3);
|
||||
width: 232px;
|
||||
bottom: 0px;
|
||||
height: calc(100vh - 56px);
|
||||
overflow: auto;
|
||||
|
||||
@media handheld and (max-width: $phone-breakpoint),
|
||||
|
|
@ -149,7 +148,10 @@
|
|||
screen and (max-device-width: $phone-breakpoint),
|
||||
screen and (max-width: $tablet-breakpoint) {
|
||||
display: none;
|
||||
//max-height: ($phone-breakpoint * 0.60);
|
||||
&.is-visible {
|
||||
height: calc(100vh - 56px - 48px);
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// FLAT NAV (.nav)
|
||||
|
|
|
|||
Loading…
Reference in New Issue