Load all images from images folder

This commit is contained in:
Zsolt Kocsmarszky 2017-12-19 12:37:08 +01:00
parent 9ac5d58b89
commit 1110e65e4a
4 changed files with 40 additions and 25 deletions

View File

@ -614,6 +614,12 @@ body {
}
}
.schema-browser {
min-height: 150px;
overflow-y: auto;
max-height: 250px;
}
.query-fullscreen-container {
}

View File

@ -60,6 +60,13 @@ function registerAll(context) {
return modules.map(f => f(ngModule));
}
function requireImages() {
// client/app/assets/images/<path> => /img/<path>
const ctx = require.context('@/assets/images/', true, /\.(png|jpe?g|gif|svg)$/);
ctx.keys().forEach(ctx);
}
function registerComponents() {
// We repeat this code in other register functions, because if we don't use a literal for the path
// Webpack won't be able to statcily analyze our imports.
@ -102,6 +109,7 @@ function registerFilters() {
});
}
requireImages();
registerDirectives(ngModule);
registerServices();
registerFilters();

View File

@ -18,72 +18,72 @@
<div class="row">
<div class="col-lg-12 database-source">
<div class="database-source__card">
<img src="/images/db-logos/bigquery.png" alt="BigQuery">
<img src="/img/db-logos/bigquery.png" alt="BigQuery">
<h3>BigQuery</h3>
</div>
<div class="database-source__card">
<img src="/images/db-logos/clickhouse.png" alt="clickhouse">
<img src="/img/db-logos/clickhouse.png" alt="clickhouse">
<h3>ClickHouse</h3>
</div>
<div class="database-source__card">
<img src="/images/db-logos/cockroachdb.png" alt="cockroachdb">
<img src="/img/db-logos/cockroachdb.png" alt="cockroachdb">
<h3>CockroachDB</h3>
</div>
<div class="database-source__card">
<img src="/images/db-logos/dynamodb.png" alt="dynamodb">
<img src="/img/db-logos/dynamodb.png" alt="dynamodb">
<h3>Amazon DynamoDB</h3>
</div>
<div class="database-source__card">
<img src="/images/db-logos/elasticsearch.png" alt="elasticsearch">
<img src="/img/db-logos/elasticsearch.png" alt="elasticsearch">
<h3>ElasticSearch</h3>
</div>
<div class="database-source__card">
<img src="/images/db-logos/graphite.png" alt="graphite">
<img src="/img/db-logos/graphite.png" alt="graphite">
<h3>graphite</h3>
</div>
<div class="database-source__card">
<img src="/images/db-logos/hive.png" alt="hive">
<img src="/img/db-logos/hive.png" alt="hive">
<h3>Hive</h3>
</div>
<div class="database-source__card">
<img src="/images/db-logos/impala.png" alt="impala">
<img src="/img/db-logos/impala.png" alt="impala">
<h3>Impala</h3>
</div>
<div class="database-source__card">
<img src="/images/db-logos/cockroachdb.png" alt="cockroachdb">
<img src="/img/db-logos/cockroachdb.png" alt="cockroachdb">
<h3>CockroachDB</h3>
</div>
<div class="database-source__card">
<img src="/images/db-logos/dynamodb.png" alt="dynamodb">
<img src="/img/db-logos/dynamodb.png" alt="dynamodb">
<h3>Amazon DynamoDB</h3>
</div>
<div class="database-source__card">
<img src="/images/db-logos/elasticsearch.png" alt="elasticsearch">
<img src="/img/db-logos/elasticsearch.png" alt="elasticsearch">
<h3>ElasticSearch</h3>
</div>
<div class="database-source__card">
<img src="/images/db-logos/graphite.png" alt="graphite">
<img src="/img/db-logos/graphite.png" alt="graphite">
<h3>graphite</h3>
</div>
<div class="database-source__card">
<img src="/images/db-logos/hive.png" alt="hive">
<img src="/img/db-logos/hive.png" alt="hive">
<h3>Hive</h3>
</div>
<div class="database-source__card">
<img src="/images/db-logos/impala.png" alt="impala">
<img src="/img/db-logos/impala.png" alt="impala">
<h3>Impala</h3>
</div>
@ -98,42 +98,42 @@
<div class="row">
<div class="col-lg-12 database-source">
<div class="database-source__card">
<img src="/images/db-logos/bigquery.png" alt="BigQuery">
<img src="/img/db-logos/bigquery.png" alt="BigQuery">
<h3>BigQuery</h3>
</div>
<div class="database-source__card">
<img src="/images/db-logos/clickhouse.png" alt="clickhouse">
<img src="/img/db-logos/clickhouse.png" alt="clickhouse">
<h3>ClickHouse</h3>
</div>
<div class="database-source__card">
<img src="/images/db-logos/cockroachdb.png" alt="cockroachdb">
<img src="/img/db-logos/cockroachdb.png" alt="cockroachdb">
<h3>CockroachDB</h3>
</div>
<div class="database-source__card">
<img src="/images/db-logos/dynamodb.png" alt="dynamodb">
<img src="/img/db-logos/dynamodb.png" alt="dynamodb">
<h3>Amazon DynamoDB</h3>
</div>
<div class="database-source__card">
<img src="/images/db-logos/elasticsearch.png" alt="elasticsearch">
<img src="/img/db-logos/elasticsearch.png" alt="elasticsearch">
<h3>ElasticSearch</h3>
</div>
<div class="database-source__card">
<img src="/images/db-logos/graphite.png" alt="graphite">
<img src="/img/db-logos/graphite.png" alt="graphite">
<h3>graphite</h3>
</div>
<div class="database-source__card">
<img src="/images/db-logos/hive.png" alt="hive">
<img src="/img/db-logos/hive.png" alt="hive">
<h3>Hive</h3>
</div>
<div class="database-source__card">
<img src="/images/db-logos/impala.png" alt="impala">
<img src="/img/db-logos/impala.png" alt="impala">
<h3>Impala</h3>
</div>

View File

@ -105,10 +105,11 @@ const config = {
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
use: [{
loader: 'url-loader',
loader: 'file-loader',
options: {
limit: 10000,
name: 'img/[name].[hash:7].[ext]'
context: path.resolve(__dirname, './client/app/assets/images/'),
outputPath: 'img/',
name: '[path][name].[ext]',
}
}]
},